custom-table

A custom-table component for vue. --base element-ui 2.3.2

Installation

npm i custom-table -D

or
yarn add custom-table -D

# if you need
yarn add element-theme-chalk -D

Usage

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)

Custom Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 表格数据 | any[] | — | [] | | props | 表头数据 | any[] | 传送门 | [] | | propsKey | 指定 data 数据的字段 key | Object | 传送门 | — | | 其他 | el-table 指定可用 attributes | — | 传送门 | — |

propsKey

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | label | 指定表格数据 label 字段为 data 的某个属性值 | string | — | 'label' | | children | 指定表格数据 children 字段为 data 的某个属性值 | string | — | 'children' |

Expand Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | — | 传送门 | — |

Custom Table With Slot Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 表格数据 | any[] | — | [] | | props | 表头数据 | any[] | 传送门 | [] | | propsKey | 指定 data 数据的字段 key | Object | 传送门 | — | | 其他 | el-table 指定可用 attributes | — | 传送门 | — |

Custom Table With Slot 注：

props 中 children 字段无效，slot 需配合 showSlot 字段使用。

Table

Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | | show-summary | 是否在表尾显示合计行 | Boolean | — | false | | sum-text | 合计行第一列的文本 | String | — | 合计 | | summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — | | span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — | | select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |

Table Events

| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | | selection-change | 当选择项发生变化时会触发该事件 | selection | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event | | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event | | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event | | cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event | | row-click | 当某一行被点击时会触发该事件 | row, event, column | | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event | | row-dblclick | 当某一行被双击时会触发该事件 | row, event | | header-click | 当某一列的表头被点击时会触发该事件 | column, event | | header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event | | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } | | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters | | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow | | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event | | expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |

Table Methods

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | clearSelection | 用于多选表格，清空用户的选择 | — | | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected | | toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded | | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row | | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — | | clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |

License

MIT