基于ElementUI table组件修改，数据化表格结构，添加实用功能，快速生成表格.zip

# E-Table 基于Element UI 表格组件封装的 ### 特点 - 数据化表格结构 - 自定义编辑单元格 - 自定义下拉筛选 （可获取远程数据显示） - 快捷选择数据（支持快捷键`ctrl`和`shift/alt`） - 保留`elementui table`原有功能 --- ### 使用方式 - 安装 ``` npm install @lozvoe/e-table npm install element-ui ``` - 引用 ``` import Vue from "vue" import ElementUI from "element-ui" import ETable from "@lozvoe/e-table" import "element-ui/lib/theme-chalk/index.css" import "@lozvoe/e-table/lib/e-table.css" Vue.use(ElementUI) Vue.use(ETable) ``` - 简单例子 ```html <template> <e-table :data="tableData" :columns="tableColumns"> </e-table> </template> <script> export default{ data(){ return { tableData:[{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }], columns:[{ prop:'date', label:'日期', width:250 },{ prop:'name', label:'姓名', width:250 },{ prop:'address', label:'地址', width:250 }] } } } </script> ``` > 多级表头只需要嵌套使用即可， 如： ```javascript columns:[{ label:'日期', childrens:[{ prop:'year', label:"年份", width: 200 },{ prop:'month', label:'月份', width:100 },{ label:'时间', childrens:[{ prop:'day', lable:'天', width:100 }] }] },{ prop:'name', label:'姓名', width:250 },{ prop:'address', label:'地址', width:250 }] ``` 这就是`e-table`的基本用法，可以看出来和`el-table`的区别就在于把`el-table-column`的插槽形式转化为了`columns`数组对象集合的形式。 所以他的书写格式只要把`el-table-column`上可配置项写成键值对插入到对应的`columns`数组对象中,就可以生效。所以这些属性就不一一列举, `el-table`上的属性一样可以直接写在`e-table`标签上。 - 分页例子 ```html <template> <e-table :data="tableData" :pagination="paginationOpt" :columns="tableColumns" @pagination-current-change="pageChange" > </e-table> </template> <script> export default{ data(){ return { paginationOpt:{ total:100 }, tableData:[{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }], columns:[{ prop:'date', label:'日期', width:250 },{ prop:'name', label:'姓名', width:250 },{ prop:'address', label:'地址', width:250 }] } } } </script> ``` ### 增加了一些属性，如下 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------|-----------------------------------------------------------|----------|------------------|--------| | columns | 所有列的对象集合数组 | Array | - | - | | config | 表格配置对象,可以对索引列,checkBox列是否可以筛选,进行控制 | Object | 见config属性说明 | - | | getFilters | 获取筛选数据的总控制中心，必须返回一个`resolve`的`Promise` | Function | - | - | | pagination | 分页配置，同`ElPagination`配置 | Boolean/Object | - | - | #### `config`属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |-----------|--------------------------------------------------------------|----------------|------------|--------| | index | 控制显示索引列,当为Object时可以添加`el-table-column`中的属性 | Boolean/Object | - | false | | selection | 控制显示check多选列的显示 | Boolean/Object | - | false | | filter | 控制所有列自定义筛选是否可用 | Boolean | true/false | true | ### 增加事件 | 事件名 | 说明 | 参数 | |-------------------|--------------------------|----------------------------| | e-filter-change | 筛选数据变化时触发 | value, column, filtedList | | cell-value-change | 编辑单元格数据变化时触发 | value,row,column,columnObj | | pagination-${ElPaginationEventName} | 分页事件，以`'pagination-'`开头连接`ElPagination`的事件名称 | `ElPagination`事件参数 | ### `columns`中增加的属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------------|--------------------------------------------------------------------------------------|------------|---------------------------------------|------------------------| | defaultHeader | 是否使用`el-table`默认列表头,如果要使用默认表头必须设为true | Boolean | true/false | false | | filter | 是否开启自定义筛选 | Boolean | true/false | false | | filterType | 内置下拉筛选类型 | String | 'selection' / 'single' / 'datePicker' | 'selection' | | filterComponent | 自定义下拉筛选组件（后面细讲用法） | Compontent | - | - | | filterAttrs | 筛选组件可接收的属性对象 | Object | - | - | | filterListeners | 筛选组件触发事件接受对象 | Object | - | - | | getFilters | 当前列筛选获取筛选数据函数，必须返回一个`resolve`的`Promise` | Function | - | - | | edit | 控制是否可编辑 | Boolean | true/false | false | | editType | 内置编辑类型 | String | 'default'/'selection' | 'default' | | editControl | 控制这一列中每一行是否可编辑，必须返回`true`or`false`,接受参数：（value,row,column） | Function | true | - | | editAttrs