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>

页面效果

相关推荐
学不会•42 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript