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

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

步骤一

先来个基本的表格展示

官例的tableData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

1
2
3
4
5
6
7

<template>
    <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

步骤二

简化一下表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!-- table.vue -->
<template>
    <el-table :data="tableData" border>
        <el-table-column v-for="(item,key) in tableKey" 
        :key="key"
        :prop="item.value"
        :label="item.name"></el-table-column>
    </el-table>
</template>
<script>
export default{
    name: 'table',
    data(){
        return{
            tableData:[...],
            tableKey: [{
                name: '日期',
                value: 'date'
            },{
                name: '姓名',
                value: 'name'
            },{
                name: '地址',
                value: 'address'
            }]
        }
    }
}
</script>

步骤三

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

新建一个父组件sl_table.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!-- sl_table.vue -->
<template>
    <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from '@/components/table'
export default{
    name: 'sl-table',
    data(){
        return {
            tableData: [...]
            tableKey: [{
                name: '日期',
                value: 'date'
            },{
                name: '姓名',
                value: 'name'
            },{
                name: '地址',
                value: 'address'
            }]
        }
    },
    components: {
        'sl-table': Table
    }
}
</script>

table.vue就更简单了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- table.vue -->
<template>
    <el-table :data="tableData" border>
        <el-table-column v-for="(item,key) in tableKey" 
        :key="key"
        :prop="item.value"
        :label="item.name"></el-table-column>
    </el-table>
</template>
<script>
export default{
    name: 'table',
    data(){
        return{
            
        }
    },
    props:['tableData','tableKey'],
}
</script>

步骤四

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

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

   table.vue

   1 2 3 4 5 6 7 8

   <!-- table.vue --> ... <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> ...

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

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <el-table-column v-for="(item,key) in tableKey" v-if="!item.operate" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> <!-- 自定义 --> <el-table-column v-else> <template scope="scope"> <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column>

   sl_table.vue

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

   <!-- sl_table.vue --> <sl-table :tableData="tableData" :tableKey="tableKey"> <template slot="date" scope="scope"> <span>{{ scope.row.date | DateFilter }}</span> </template> </sl-table> <script> export default{ data(){ return { tableData: [...] tableKey: [{ name: '日期', value: 'date', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', operate: false }] } }, filters: { DateFilter(){...} } } </script>

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

   1 2 3 4 5 6 7

   <!-- sl_table.vue --> <sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true"> <template slot="expand" scope="scope"> {{...expand something}} </template> ... </sl-table>

   table.vue

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <!-- table.vue --> <el-table :data="tableData" border @expand="handleExpand" ref="raw_table"> <el-table-column v-if="isExpand" type="expand"> <template scope="scope"> <slot name="expand" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> </el-table> ... props: ['tableData','tableKey','isExpand','isExpandOnly'], methods: { handleExpand(row,expanded){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } } }

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