vue element 中的table动态渲染表头

2021年03月31日约 750 字预计阅读 2 分钟次阅读

table

1
2
3
4
5
6
7
8
9

<el-table :data="tableData" style="width: 100%">
            <el-table-column 
            v-for="(item,index) in labelData"
            :key = index
            :prop="item.prop"
            :label="item.label" 
            ></el-table-column>
        </el-table>

data labelData 中的 prop 是 tableData 中的属性

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

labelData:[
        {index:1,label:"日期",prop:'date'},
        {index:2,label:"编号",prop:'code'},
        {index:3,label:"详情",prop:'content'}
        ],
    tableData: [
        {
        date: "2016-05-02",
        code: "王小虎",
        content: "会议地点上海市普陀区金沙江路 1518 弄",
        },
        {
        date: "2021-03-26",
        code: "王小虎",
        content: "地点修改为：上海市普陀区金沙江路 1518 弄",
        },
    ]

通过 v-for 列表渲染表头，v-if条件判断渲染特殊列，没有特殊列的只使用 v-else所在的<el-table-column></el-table-column>即可

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
<div>
    <el-table :data="tabledata" stripe class="iTable" style="width:100%;">
        <!-- 表格序号列和选择列单独列出，其他列条件判断动态渲染表头和 table 数据 -->
        <el-table-column fixed type="selection" width="45"></el-table-column>
        <el-table-column fixed type="index" label="序号" width="45"></el-table-column>
        <!-- 表头动态渲染 -->
        <template v-for="(config,index) in tableHeadConfig">
            <!-- 特殊列 E 添加 slot  -->
            <el-table-column 
            v-if="config.prop==='E'"
            :key="index"
            show-overflow-tooltip
            :prop="config.prop"
            :label="config.label"
            :width="config.width?config.width : ''"
            >
                <template slot-scope="scope">
                    <span v-if ="scope.row.D==='666'" class="generalstyle">666</span>
                    <span v-if ="scope.row.D==='888'" class="generalstyle disable">888</span>
                </template>
            </el-table-column>
            <!-- 前三列固定 -->
            <el-table-column 
            v-else-if="config.prop==='A'||config.prop==='B'||config.prop==='C'"
            fixed
            :key="index"
            show-overflow-tooltip
            :prop="config.prop"
            :label="config.label"
            :width="config.width?config.width : ''"
            ></el-table-column>
            <!-- 其他列根据表头数据 tableHeadConfig 正常渲染，数值通过 `:prop`动态绑定， tableHeadConfig 数据中的prop的值是 tableData 中的item的key，即每列的prop值绑定在table中 -->
            <el-table-column 
            v-else
            :key="index"
            show-overflow-tooltip
            :prop="config.prop"
            :label="config.label"
            :width="config.width?config.width : ''"
            ></el-table-column>
        </template>
    </el-table>
</div>
</template>
<script>
export default {
    data (){
        return{
            tableHeadConfig:[
                {label:"aa",prop:"A"},
                {label:"bb",prop:"B",width:100},
                {label:"cc",prop:"C"},
                {label:"dd",prop:"D",width:150},
                {label:"ee",prop:"E"},
            ],
            tableData:[
                {A:"a1",B:"b1",C:"c1",D:"d1",E:"e1"},
                {A:"a12",B:"b12",C:"c12",D:"d12",E:"e12"},
                {A:"a13",B:"b13",C:"c13",D:"d13",E:"e13"},
            ]
        }
    }
}
</script>

<style >
/* scss中显示和禁用状态样式 */
.generalstyle{
    background-color:#349f00;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    &.disable{
        background-color: #c9c9c9;
    }
}

</style>

目录

vue element 中的table动态渲染表头