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

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

数据结构

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

javascript 复制代码
// 表头
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是列值

html 复制代码
<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部分

  1. 当表头数据不为空时,循环遍历表头数据;
  2. 在循环体中定义一个临时变量temp来存储处理过的数据,title为列名,value为列值,并返回这个temp;
  3. 最后得到this.tableData数组,存储的处理过的数据;
javascript 复制代码
// 处理表格数据
loadTableList() {
    if (this.headTableAtts && this.headTableAtts.length) {
        this.tableData = this.headTableAtts.map(column => {
            let temp = { title: column.columnLabel, value: column.columnName }
            return temp
        })
    }
}

完整代码

javascript 复制代码
<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>

页面效果

相关推荐
Ljw...12 分钟前
Vue.js组件开发
vue.js
兔老大的胡萝卜1 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
shenweihong2 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
齐 飞2 小时前
MongoDB笔记02-MongoDB基本常用命令
前端·数据库·笔记·后端·mongodb
巧克力小猫猿2 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js
FinGet2 小时前
那总结下来,react就是落后了
前端·react.js
前端李易安2 小时前
手写一个axios方法
前端·vue.js·axios
XinZong2 小时前
【VSCode插件推荐】想准时下班,你需要codemoss的帮助,分享AI写代码的愉快体验,附详细安装教程
前端·程序员
trim2 小时前
写了个可以在工作中快速摄取知识的神器,都来体验体验
前端·产品
ErvinHowell2 小时前
文件MD5生成性能大提升!如何实现分片与Worker优化
前端·vue.js·算法