vue3+elementplus+table动态列

思路

1.colsArr，用来渲染列表。dataList，用来渲染行数据
2.循环colsArr，生成 el-table-column
3.数据格式如下

colsArr: [
                { colName: '排名', key: 'cols0' },
                { colName: '区域', key: 'cols1' },
                { colName: '主题名称', key: 'cols2' },
                { colName: '次数', key: 'cols3' },
                { colName: '人数', key: 'cols4' }
            ],
dataList: [
                { cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },
                { cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },
                { cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },
                { cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },
                { cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }
            ]

具体代码

<template>
    <div class="element-table">
        <el-table
            :data="initDataList"
            style="width: 100%"
            :header-cell-style="{ background: '#212949' }"
        >
            <el-table-column
                v-for="(item, index) in colsArr"
                :key="index"
                :label="item.colName"
                align="center"
                :show-overflow-tooltip="true"
                min-width="60"
            >
                <template slot-scope="scope">
                    <div v-if="index == 0">
                        <span class="icon">{{ scope.row[item.key].value }}</span>
                    </div>
                    <span v-else>{{ scope.row[item.key].value }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            /**
             * @params
             * colName 表头名称
             * key 自定义列名 处理数据是使用
             */
            colsArr: [
                { colName: '排名', key: 'cols0' },
                { colName: '区域', key: 'cols1' },
                { colName: '主题名称', key: 'cols2' },
                { colName: '次数', key: 'cols3' },
                { colName: '人数', key: 'cols4' }
            ],
            /**
             * @params
             * 此处的列名必须和colsArr中定义的一致
             */
            dataList: [
                { cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },
                { cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },
                { cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },
                { cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },
                { cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }
            ]
        };
    },
    computed: {
        // 处理数据
        initDataList() {
            let arr = [];
            this.dataList.forEach((item, index) => {
                let obj = {};
                this.colsArr.forEach((prop, idx) => {
                    if(idx == 0) {
                        obj[prop.key] = { value: index + 1, name: prop.colName };
                    } else {
                        obj[prop.key] = { value: item[prop.key], name: prop.colName };
                    }
                })
                arr.push(obj);
            })
            return arr;
        }
    }
};
</script>

<style lang="stylus" scoped>
.element-table {
    /deep/ .el-table {
        background-color: rgba(0, 0, 0, 0);
    }
    /deep/ .el-table::before {
        height: 0;
    } 
    /deep/ .el-table th.el-table__cell,
    /deep/ .el-table td.el-table__cell {
        border-bottom: none;
        padding: 0;
        color: #FFF;
        font-size: 14px;
    }
    /deep/ .el-table .el-table__header-wrapper {
        height: 40px;
        line-height: 40px;
    }

    /deep/ .el-table .el-table__header-wrapper .cell {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /deep/ .el-table .el-table__row {
        height: 40px;
        background: #182041;
        img {
            height: 20px;
            vertical-align: middle;
        }
        &:nth-child(2),
        &:nth-child(4) {
            background: #212949;
        }
    }
    /deep/ .el-table tbody tr:hover > td {
      background: rgba(0, 0, 0, 0);
    }
    /deep/ .el-table__empty-block {
        background: #182041;
    }
    span.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #FFFFFF;
        border-radius: 2px;
    }
}
</style>