小聂子客栈

VUE element-ui 写个复用Table组件

热度

饿了么的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>
  1. 表格展开行
    类似宽度,只要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] : []
    }
    }
    }

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

扫描二维码,分享此文章