## BioTable 百奥知表格

主要用于展示表格数据。

### 基本用法

:::demo 绑定`name`到一个`string`类型的变量。可以使用`size`属性与`color`属性来设置svg图形的大小和颜色。

```html
<bio-table
  :columns="columns"
  :data="list"
  height="100%"
  stripe
  type="local">
</bio-table>
<script>
  export default {
    data() {
      return {
        columns: [
          {
            "prop": "ResearchCode",
            "label": "研究代码",
            "width": 100,
            "minWidth": 100,
            "align": "left",
            "headerAlign": "left",
            "sortable": false,
            "showOverflowTooltip": true
          },
          {
            "prop": "StudyName",
            "label": "研究名称",
            "width": 300,
            "minWidth": 300,
            "align": "left",
            "headerAlign": "left",
            "sortable": false,
            "showOverflowTooltip": false
          },
          {
            "prop": "projectManager",
            "label": "项目经理",
            "width": 100,
            "minWidth": 100,
            "align": "left",
            "headerAlign": "left",
            "sortable": false,
            "showOverflowTooltip": true
          },
          {
            "prop": "SiteIdNumber",
            "label": "中心数",
            "width": 100,
            "minWidth": 100,
            "align": "right",
            "headerAlign": "right",
            "sortable": false,
            "showOverflowTooltip": true
          },
          {
            "prop": "JoiningProgress",
            "label": "入组进度",
            "width": 100,
            "minWidth": 100,
            "align": "right",
            "headerAlign": "right",
            "sortable": false,
            "showOverflowTooltip": true
          },
          {
            "prop": "ProjectSchedule",
            "label": "项目进度",
            "width": 100,
            "minWidth": 100,
            "align": "right",
            "headerAlign": "right",
            "sortable": false,
            "showOverflowTooltip": true,
            "children": []
          }
        ],
        list: [
          {
            "id": "1688240128",
            "Serial": 1,
            "ResearchCode": "eClinical-20220510",
            "StudyName": "eClinical-202205102",
            "projectManager": "郭志勇、whx321456788991",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1685356544",
            "Serial": 3,
            "ResearchCode": "HK_20220224",
            "StudyName": "20220224测试研究",
            "projectManager": "whx321456788991",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1681784832",
            "Serial": 4,
            "ResearchCode": "baidistudy",
            "StudyName": "项目测试0427",
            "projectManager": "B经理",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1679196160",
            "Serial": 5,
            "ResearchCode": "testshanhu",
            "StudyName": "test20220419",
            "projectManager": "邵征",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1671823360",
            "Serial": 6,
            "ResearchCode": "03",
            "StudyName": "乳酸益生菌治疗小儿便秘三期",
            "projectManager": "邵征",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "19%"
          },
          {
            "id": "1669201920",
            "Serial": 7,
            "ResearchCode": "02",
            "StudyName": "乳酸益生菌治疗小儿便秘二期",
            "projectManager": "袁冉、李伟烨",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1667497984",
            "Serial": 8,
            "ResearchCode": "whxtest222",
            "StudyName": "whxtest222",
            "projectManager": "whx321456788991",
            "SiteIdNumber": 1,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1666187265",
            "Serial": 9,
            "ResearchCode": "whxtest2",
            "StudyName": "whxtest2",
            "projectManager": "龚娜PM",
            "SiteIdNumber": 2,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1657602048",
            "Serial": 12,
            "ResearchCode": "01",
            "StudyName": "袁冉test项目",
            "projectManager": "袁冉",
            "SiteIdNumber": 2,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1653800962",
            "Serial": 13,
            "ResearchCode": "test_2022_03_25V1.0",
            "StudyName": "test_2022_03_25V1.0",
            "projectManager": "lwy_pm01@126.com",
            "SiteIdNumber": 1,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1653800961",
            "Serial": 14,
            "ResearchCode": "whxTest",
            "StudyName": "whx测试下发项目--勿动2222",
            "projectManager": "",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1646919680",
            "Serial": 15,
            "ResearchCode": "Y-20220319-002",
            "StudyName": "吡咯替尼II期临床",
            "projectManager": "",
            "SiteIdNumber": 1,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1640988676",
            "Serial": 17,
            "ResearchCode": "test_share001",
            "StudyName": "test_share001",
            "projectManager": "zdnpm2",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1640988675",
            "Serial": 18,
            "ResearchCode": "EDC-20210827",
            "StudyName": "S086片治疗轻、中度原发性高血压的有效性和安全性的随机、双盲、阳性药平行对照、多中心Ⅲ期临床研究",
            "projectManager": "龚娜PM",
            "SiteIdNumber": 1,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1640988674",
            "Serial": 19,
            "ResearchCode": "Menu-UI-001",
            "StudyName": "菜单UI优化项目",
            "projectManager": "龚娜PM",
            "SiteIdNumber": 0,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1640988673",
            "Serial": 20,
            "ResearchCode": "研代ALP-20211201",
            "StudyName": "研名ALP-202112012",
            "projectManager": "龚娜PM",
            "SiteIdNumber": 1,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1640988672",
            "Serial": 21,
            "ResearchCode": "CTMS0604",
            "StudyName": "CTMS0604",
            "projectManager": "B经理、Z经理",
            "SiteIdNumber": 4,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1639907328",
            "Serial": 22,
            "ResearchCode": "CTMS0603",
            "StudyName": "CTMS0603",
            "projectManager": "Z经理、B经理",
            "SiteIdNumber": 3,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1621655552",
            "Serial": 23,
            "ResearchCode": "Test2022-03-10",
            "StudyName": "Test2022-03-10",
            "projectManager": "",
            "SiteIdNumber": 2,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1616805888",
            "Serial": 24,
            "ResearchCode": "SHR7280-102",
            "StudyName": "评估绝经前子宫内膜异位症受试者多次口服SHR7280的安全性、耐受性、药代动力学、药效动力学及疗效的随机、双盲、剂量递增、安慰剂对照的I/II期临床试验",
            "projectManager": "康PM、康Test、王兵、康DM",
            "SiteIdNumber": 0,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          },
          {
            "id": "1616805889",
            "Serial": 24,
            "ResearchCode": "SHR7280-102",
            "StudyName": "评估绝经前子宫内膜异位症受试者多次口服SHR7280的安全性、耐受性、药代动力学、药效动力学及疗效的随机、双盲、剂量递增、安慰剂对照的I/II期临床试验",
            "projectManager": "康PM、康Test、王兵、康DM",
            "SiteIdNumber": 0,
            "JoiningProgress": "0%",
            "ProjectSchedule": "0%"
          }
        ]
      }
    }
  };
</script>
```
:::

### 绑定远程接口

:::demo 设置`width`和`height`属性，来实现对svg图形宽高的控制，设置`className`属性为svg元素添加类名实现更多样式控制。当发现组件设置color不生效时，是因为下载的svg图形设有默认的颜色 只需找到svg代码中的`fill`属性进行删除即可。


```html
<bio-table
  :columns-refresh="true"
  :params="tableParams"
  :url="assitUrl"
  height="100%"
  method="post"
  stripe
  type="remote">
</bio-table>
<script>
  export default {
    data() {
      return {
        tableParams:{},
        assitUrl:'/myMock/pee'
      }
    }
  };
</script>
```

:::


### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| name | svg文件的名字 | string | — | — |
| disabled  | 是否禁用    | boolean   | — | false   |
| width  | svg元素的宽度  | string | — | — |
| height  | svg元素的高度 | string   | — | — |
| color | svg元素的颜色 | string   | — | — |
| size | svg元素的fontSize大小 | string   | — | — |
| className | svg元素的类名 | string   | — | — | 

### Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| onClick | svg元素被点击时的回调函数 | — |
