element-datatable
一款基于element-ui的表格插件，支持所有element-ui的属性和方法，可以接受本地数据和ajax参数异步请求服务器数据
A form plug-in based on element-ui that supports the properties and methods of all element-ui and can accept local data or ajax parameter asynchronous request server data
相关依赖 Dependencies
- axios, element-ui, qs
- IE >= 9
基本用法 Build Setup
- 安装 install
npm i element-datatable -S
在项目中引入element-ui依赖,参见http://element.eleme.io. 引入element相关的css等文件.
使用本地数据 use local data
- 使用ajax获取数据 get data by ajax
有关el-table和el-table-column使用方法，请参考element-ui相关说明
其它功能 Other property & event
支持所有的el-table、el-table-column属性、事件和方法.
checked-prop
仅在tyep="selection"时有效，该属性接收一个字符串指定某一属性或方法，通过验证数据的指定属性值确认是否选中该条数据；方法接收两个参数(row, index), 通过返回true或false指定该数据是否选中selectAbleProp
仅在tyep="selection"时有效，该属性接收一个字符串指定某一属性，通过验证数据的该属性值判断是否可选，作用与el-table-column的selectable属性相同。
ElementDatatable Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| ajax | 用于向后端发送ajax请求, 类型为string时接收一个url地址， 类型为object时接收整个ajax对象， 默认使用get方式 | string / object | -- | -- |
| serverParams | 表格请求的查询条件、请求参数 | object | -- | -- |
| showLoading | 表格请求时是否显示loading加载 | boolean | -- | true |
| columnAttributes | 表格列的属性， 属性值与element table-column attributes 一致， 但是采用小驼峰命名规则 | array | -- | -- |
| checkedProp | 仅对 type=selection 的列有效， 指定默认选中， 或者传入一个函数，返回一个Boolean 表示是否选中 | string/function（row, index） | -- | -- |
| selectAbleProp | 仅对 type=selection 的列有效，与表格列中的selectAble属性作用一致，决定这一行的 CheckBox 是否可以勾选 | string | -- | -- |
| createdUnload | 指定表格初始化的时候是否发送请求获取数据 | boolean | -- | false |
| pageIndexKey | 指定表格的pageIndex属性 | string | -- | pageIndex |
| pageSizeKey | 指定表格的pageSize属性 | string | -- | pageSize |
| dataKey | 指定后台返回数据的key值 | string | -- | tbody |
| totalKey | 指定后台返回表格总条数的key值 | string | -- | -- |
| 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 | -- | true |
| 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, column, 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 | -- |
| 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 |
| small | 是否使用小型分页样式 | boolean | -- | false |
| background | 是否为分页按钮添加背景色 | -- | false | |
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | -- | -- |
| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
| layout | 组件布局，子组件名用逗号分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | number[] | -- | [10, 20, 30, 50, 100] |
| popper-class | 每页显示个数选择器的下拉框类名 | string | -- | -- |
| prev-text | 替代图标显示的上一页文字 | string | -- | -- |
| next-text | 替代图标显示的下一页文字 | string | -- | -- |
| disabled | 是否禁用分页按钮 | boolean | -- | false |
ElementDatatable 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 |
ElementDatatable Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| reloadData | 重新加载表格数据,可以新加参数座位查询字段 | searchObj |
ElementDatatable Slot
slot
slot name=“first”