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>

页面效果

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端