VUE element-ui 写个复用Table组件

饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。

项目中表格较多，所以复用性最重要

步骤一

先来个基本的表格展示

官例的tableData

tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
}, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
}, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
}]

table.vue

步骤二

简化一下表格：

//table.vue

步骤三

复用table.vue就是————给它数据的同时告诉它我的字段名呗

新建一个父组件sl_table.vue

//sl_table.vue

table.vue就更简单了

//table.vue

步骤四

可以根据需求修改table的形式

1. 列宽度
   这个较为简单，可以直接加个属性

   //sl_table.vue
   ...
       data(){
           return {
               tableData: [...]
               tableKey: [{
                   name: '日期',
                   value: 'date',
                   width: 80
               },{
                   name: '姓名',
                   value: 'name',
                   width: 80
               },{
                   name: '地址',
                   value: 'address'
               }]
           }
       },
   ...

   table.vue

   //table.vue
   ...
   
   ...

2. 自定义模板列

   如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate

   table.vue

   //sl_table.vue
   
       
   
   ...
           data(){
               return {
                   tableData: [...]
                   tableKey: [{
                       name: '日期',
                       value: 'date',
                       operate: true
                   },{
                       name: '姓名',
                       value: 'name',
                       operate: false
                   },{
                       name: '地址',
                       value: 'address',
                       operate: false
                   }]
               }
           },
           filters: {
               DateFilter(){...}
           }
   ...

3. 表格展开行

   类似宽度，只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果：

   //sl_table.vue
   
   
       
       ...
   

   table.vue

   //table.vue
   
       
           
       
   
   ...
   props: ['tableData','tableKey','isExpand','isExpandOnly'],
   methods: {
       handleExpand(row,expanded){
           if(this.isExpand && this.isExpandOnly){
              this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
           }
       }
   }

其他的（排序、多选）操作也是类似添加。。。多不赘述。