## table 表格 ### 引入 ```javascript import { table } from '@58fe/p5'; ``` 引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-table` ### 基本用法 目前只支持，左边固定，右侧固定，中间滑动 :::demo 按钮 ```html ``` ::: ### 带边框表格 `border`参数设置为true即可 :::demo 按钮 ```html ``` ::: ### 固定表头 设置`max-height`最大表格高度，超过高度后可滚动 :::demo 按钮 ```html ``` ::: ### 固定列 `columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定 :::demo 按钮 ```html ``` ::: ### 同时固定表头和列 `columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定 :::demo 按钮 ```html ``` ::: ### 同时固定表头和列 两侧固定 `columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定 :::demo 按钮 ```html ``` ::: ### 排序 `columns`参数中，想要设置排序的列设置参数`sortable`值为`true`，点击排序触发`sort`事件。若只设置一列排序，返回参数为对象形式。 `callbackData: {key: 'name',sort: 'asc'}`，其中`sort`值`asc`为升序`decs`为降序`normal`不排序，若设置多列排序，返回参数对象数组`callbackData: [{key: 'name',sort: 'asc'}, {key: 'age',sort: 'desc'}]`。 :::demo 按钮 ```html ``` ::: ### 自定义操作 在`column`内增加`render`函数，该函数提供两个参数`h`渲染函数，同vue的h，第二个参数为当前行的对象数据。 :::demo 按钮 ```html ``` ::: ### 暂无数据 :::demo 按钮 ```html ``` ::: ### 带多选框 :::demo 按钮 ```html ``` ::: ### 参数 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------ | ----------- | ------------ | ------- | | data | 表格数据 | Array | —— | [] | | columns | 表格头(下面有具体的colums参数说明）| Array | —— | [] | | maxHeight | 最大高度(超出后，表格滚动) | Number | —— | —— | | border | 全包围border | Boolean | —— | false | | hasCheckbox | 是否需要多选框 | Boolean | —— | false | | isAllCheckedCustom | 是否默认选中全部 | Boolean | —— | false |

#### colums | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------ | ----------- | ------------ | ------- | | label | 表格当前列文案 | String | —— | —— | | key | 表格当前列key值，对应data中的key | String/Number | —— | —— | | width | 表格当前列的宽度(默认不填为平均分) | Number/String | —— | —— | | fixed | 表格头(下面有具体的colums参数说明）| Array | —— | —— | | sortable | 支持排序功能 | Boolean | —— | ——| | render | 渲染函数(同vue内的渲染函数，包含两个参数，h/params，`params:{index, row, column}`，index为索引值，row当前行的数据，column当前列的数据) | Function | —— | —— | #### Events | 参数 | 说明 | 类型 | 参数 | | -------- | ------------ | ----------- | ------------ | | sort | 点击排序图标后触发 | Function | `{key: "${当前要排序的key}", sort: "none"}` sort值为`asc、desc、none` | | ontablechecked | 点击多选框后触发 | Function | 当前选中状态下的data数组 |