xyf-vue-table-with-tree-grid
v0.0.5
Published
修改自[email protected](官方:https://github.com/MisterTaki/vue-table-with-tree-gird),自用!
Downloads
3
Maintainers
Readme
xyf-vue-table-with-tree-grid
修改自[email protected]( 官方:https://github.com/MisterTaki/vue-table-with-tree-gird )
修改了点击全选后不触发选中事件的问题。
添加selection-change事件。
自用!!!!!
Example
API
Table Attributes
| 属性 | 说明 | 类型 | 参数 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | data | 表格各行的数据 | Array | - | [] | | empty-text | 表格数据为空时显示的文字 | String | - | '暂无数据' | | columns | 表格各列的配置(具体见下文:Columns Configs) | Array | - | [] | | show-header | 是否显示表头 | Boolean | - | true | | show-index | 是否显示数据索引 | Boolean | - | false | | index-text | 数据索引名称 | String | - | '序号' | | show-summary | 是否显示表尾合计行 | Boolean | - | false | | sum-text | 表尾合计行首列名称 | String | - | '合计' | | summary-method | 表尾合计行计算方法 | Function | data, column, columnIndex | - | | max-height | 最大高度 | [String, Number] | - | 'auto' | | stripe | 是否显示间隔斑马纹 | Boolean | - | false | | border | 是否显示纵向边框 | Boolean | - | false | | show-row-hover | 鼠标悬停时,是否高亮当前行 | Boolean | - | true | | tree-type | 是否为树形表格 | Boolean | - | false | | children-prop | 树形表格中遍历的属性名称 | String | - | 'children' | | is-fold | 树形表格中父级是否默认折叠 | Boolean | - | true | | expand-type | 是否为展开行类型表格(为 True 时,需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex) | Boolean | - | false | | selection-type | 是否为多选类型表格 | Boolean | - | false | | row-key | 行数据的 Key,用来优化 Table 的渲染 | Function | row, rowIndex | rowIndex | | row-class-name | 额外的表格行的类名 | String, Function | row, rowIndex | - | | cell-class-name | 额外的表格行的类名 | String, Function | row, rowIndex, column, columnIndex | - | | row-style | 额外的表格行的样式 | Object, Function | row, rowIndex | - | | cell-style | 额外的表格单元格的样式 | Object, Function | row, rowIndex, column, columnIndex | - |
Columns Configs
| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | label | 列标题名称 | String | '' | | prop | 对应列内容的属性名 | String | '' | | align | 对应列内容的对齐方式,可选值有 'center', 'right' | String | 'left' | | headerAlign | 对应列标题的对齐方式,可选值有 'center', 'right' | String | 'left' | | width | 列宽度 | [String, Number] | 'auto' | | minWidth | 列最小宽度 | [String, Number] | '80px' | | type | 列类型,可选值有 'template'(自定义列模板) | String | '' | | template | 列类型为 'template'(自定义列模板) 时,对应的作用域插槽(它可以获取到 row, rowIndex, column, columnIndex)名称 | String | '' |
Table Events
| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | cell-click | 单击某一单元格 | row, rowIndex, column, columnIndex, $event | | cell-dblclick | 双击某一单元格 | row, rowIndex, column, columnIndex, $event | | cell-contextmenu | 在某一单元格上点击鼠标右键 | row, rowIndex, column, columnIndex, $event | | cell-mouseenter | 鼠标滑入某一单元格 | row, rowIndex, column, columnIndex, $event | | cell-mouseleave | 鼠标滑出某一单元格 | row, rowIndex, column, columnIndex, $event | | row-click | 单击某一行 | row, rowIndex, $event | | row-dblclick | 双击某一行 | row, rowIndex, $event | | row-contextmenu | 在某一行上点击鼠标右键 | row, rowIndex, $event | | row-mouseenter | 鼠标滑入某一行 | row, rowIndex, $event | | row-mouseleave | 鼠标滑出某一行 | row, rowIndex, $event | | checkbox-click | 鼠标单击checkbox | row, rowIndex, $event | | selection-change | checkbox选择项改变事件 | 选中的项数组(selection) | | tree-icon-click | 鼠标单击树形icon | row, rowIndex, $event | | expand-cell-click | 鼠标单击展开单元格 | row, rowIndex, $event |
Table Methods
| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | getCheckedProp | 当表格为多选类型表格时,用于获取当前所选项的属性,返回一个数组;属性默认为'index'。 | prop |