a custom table component for vue.
npm install custom-tableshell
npm i custom-table -Dor
yarn add custom-table -D
if you need
yarn add element-theme-chalk -D
`Usage
`javascript
import Vue from 'vue'
import CustomTable from 'custom-table'Vue.use(CustomTable)
// or
// maybe you need to install element-theme-chalk as css style
import 'element-theme-chalk/lib/table.css'
import 'element-theme-chalk/lib/table-column.css'
import Vue from 'vue'
import {
CustomTable,
ExpendTable,
CustomTableColumn,
CustomTableWithSlot
} from 'custom-table'
Vue.component(CustomTable.name, CustomTable)
Vue.component(ExpendTable.name, ExpendTable)
Vue.component(CustomTableColumn.name, CustomTableColumn)
Vue.component(CustomTableWithSlot.name, CustomTableWithSlot)
`$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | 传送门 | [] |
| propsKey | 指定 data 数据的字段 key | Object | 传送门 | — |
| 其他 | el-table 指定可用 attributes | — | 传送门 | — |
#### propsKey
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 指定表格数据 label 字段为 data 的某个属性值 | string | — | 'label' |
| children | 指定表格数据 children 字段为 data 的某个属性值 | string | — | 'children' |
$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | 传送门 | [] |
| props-key | data 数据指定的字段 key | Object | 传送门 | — |
| expand-keys | 默认展开行的键值 | string[] | — | [] |
| left | 折叠按钮位置,列 | number | — | 1 |
| width | 表格默认最少宽度 | number | — | 80 |
| *row-key | 行数据的 key,保证唯一性 | string | — | 默认以 props 的第一个值的 prop 作为 key |
| 其他 | el-table 指定可用 attributes | — | 传送门 | — |
$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | 传送门 | [] |
| propsKey | 指定 data 数据的字段 key | Object | 传送门 | — |
| 其他 | el-table 指定可用 attributes | — | 传送门 | — |
##### Custom Table With Slot 注:
props 中 children 字段无效,slot 需配合 showSlot 字段使用。
Table
$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | — | — |
| height | Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 | string/number | — | — |
| max-height | Table 的最大高度 | string/number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | medium / small / mini | — |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | — | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
| current-row-key | 当前行的 key,只写属性 | String,Number | — | — |
| row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| cell-class-name | 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| cell-style | 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| header-row-class-name | 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| header-row-style | 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| header-cell-style | 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, rowIndex, rowIndex, columnIndex})/Object | — | — |
| row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。 | Function(row)/String | — | — |
| empty-text | 空数据时显示的文本内容,也可以通过 slot="empty" 设置 | String | — | 暂无数据 |
| default-expand-all | 是否默认展开所有行,当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。| Array | — | |
| default-sort | 默认的排序列的prop和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序| Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| tooltip-effect | tooltip effect` 属性 | String | dark/light | | dark |