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>

项目实战

<template>
  <el-table :data="rowsArr" style="width: 100%;" height="530px" border :key="Math.random()">
            <el-table-column type="index" label="序号" width="56" align="center" />
            
            <el-table-column align="center" :label="item.colName" v-for="(item, index) in colsArr" :key="index" :prop="item.colKey"/>

          </el-table>
</template>
<script setup >
import {ref,reactive,defineProps} from "vue"
import { getDataApi } from "../api";


const props=defineProps(['tableId'])
const colsArr = ref({ colName: '', colKey: '' })
const rowsArr = ref([])
const getData = () => {
  getDataApi(props.tableId).then(res => {
    

    colsArr.value = Object.keys(res.data[0]).map((item,index) => {
      return { colName: item, colKey: 'colKey' +index  }
    })

    console.log('colsarr',colsArr.value);

    res.data.forEach(item1=>{
      console.log('item1',item1);
      let obj = {}
      Object.keys(item1).forEach((item2,index2) => {
       
        obj['colKey' + index2] = item1[item2]
      })

      
      rowsArr.value.push({
        ...item1,
        ...obj
      })

    
    })

    console.log('rowsArr',rowsArr.value);

    // tableData.value = detail.value.tableStructureList
  }).catch(err => {
    console.log('err', err)
  })
}

getData()

</script>
<style lang="scss" scoped>




</style>