首页 前端知识 vue elementUI搭建动态表头的表格

vue elementUI搭建动态表头的表格

2024-07-20 17:07:56 前端知识 前端哥 700 870 我要收藏

前提:以下代码是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部分

  1. 当表头数据不为空时,循环遍历表头数据;
  2. 在循环体中定义一个临时变量temp来存储处理过的数据,title为列名,value为列值,并返回这个temp;
  3. 最后得到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>

页面效果

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14016.html
评论
发布的文章

HTML5 移动开发秘籍(一)

2024-08-05 23:08:12

【HTML5系列教程】

2024-08-05 23:08:12

HTML5面试题

2024-08-05 23:08:06

JQuery基础---01

2024-08-05 23:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!