vue+elementUI搭建动态表头的表格

news2024/11/26 4:34:58

前提：以下代码是vue2项目结合elementUi完成的

数据结构

后端传来的数据是两个list，一个表头的list，一个表格内容的list

// 表头
headTableAtts: [
    { columnLabel: '姓名', columnName: 'name' },
    { columnLabel: '年龄', columnName: 'age' },
    { columnLabel: '性别', columnName: 'gender' },
    { columnLabel: '学校', columnName: 'school' },
    { columnLabel: '学历', columnName: 'qualification' },
],
// 表格
dataList: [
    { name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
    { name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
    { name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
    { name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
    { name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
    { name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
],

html部分

使用elementUI的表格，label是列名，prop是列值


<el-table :data="dataList" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all>
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column v-for="(item, index) in tableData" :key="index" :label="item.title" :prop="item.value"></el-table-column>
</el-table>

js部分

当表头数据不为空时，循环遍历表头数据；
在循环体中定义一个临时变量temp来存储处理过的数据，title为列名，value为列值，并返回这个temp；
最后得到this.tableData数组，存储的处理过的数据；

// 处理表格数据
loadTableList() {
    if (this.headTableAtts && this.headTableAtts.length) {
        this.tableData = this.headTableAtts.map(column => {
            let temp = { title: column.columnLabel, value: column.columnName }
            return temp
        })
    }
}

完整代码

<template>
    <div>
        <el-table :data="dataList" style="width: 80%;" row-key="id" border default-expand-all stripe>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column v-for="(item, index) in tableData" :key="index" :label="item.title" :prop="item.value"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表头
            headTableAtts: [
                { columnLabel: '姓名', columnName: 'name' },
                { columnLabel: '年龄', columnName: 'age' },
                { columnLabel: '性别', columnName: 'gender' },
                { columnLabel: '学校', columnName: 'school' },
                { columnLabel: '学历', columnName: 'qualification' },
            ],
            // 表格
            dataList: [
                { name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
                { name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
                { name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
                { name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
                { name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
                { name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
            ],
            // 处理后的表格数据
            tableData: [],
        }
    },
    mounted() {
        // 页面一加载就调用处理表格数据的方法
        this.loadTableList()
    },
    methods: {
        // 处理表格数据
        loadTableList() {
            if (this.headTableAtts && this.headTableAtts.length) {
                this.tableData = this.headTableAtts.map(column => {
                    let temp = { title: column.columnLabel, value: column.columnName }
                    return temp
                })
            }
        }
    }
}
</script>

<style lang="scss">
.el-table th.el-table__cell {
    background-color: #D3E3FD !important;
}
</style>