提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能

Vueelementui 实现 功能 以及 动态 表格 多行
2023-09-14 09:13:55 时间

这周工作中，遇见了一个表格动态列的需求，这记录一下如何使用Vue和ElementUI实现表格多行表头以及表格动态列的功能。

目录

1.1、案例效果

1.2、案例代码

（1）实现思路

（2）HTML代码

（3）完整代码

1.1、案例效果

Vue + ElementUI实现表格多行表头以及表格动态列的运行效果如下所示：

1.2、案例代码

（1）实现思路

  • 表格的表头采用【v-for】循环渲染。
  • Table表格要实现多行表头，只需要在【<el-table-column>】标签里面嵌套【<el-table-column>】标签即可。
  • 表格的数据可以是：一条数据中包含一个数组，这个数组就是动态渲染列对应的数据。

（2）HTML代码

<el-table :data="tableData" style="width: 100%">
    <!-- 采用 v-for 实现动态列 -->
    <template v-for="(item,column) in tableHeaderColumn">
        <template v-if="column === 0">
            <el-table-column label="日期" prop="name" width="80">
                <el-table-column label="星期" prop="name" width="80"></el-table-column>
            </el-table-column>
        </template>
        <el-table-column :label="item.dayTime" width="60">
            <el-table-column :label="item.weekName" width="60">
                <template scope="scope">
                    <!-- 这里实现复选框的绑定 -->
                    <el-checkbox v-model="scope.row.tableColumn[column]['checked']"></el-checkbox>
                </template>
            </el-table-column>
        </el-table-column>
    </template>
</el-table>

（3）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格动态列</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app {
            padding: 100px 100px;
        }
    </style>
</head>
<body>

<div id="app">
    <el-table :data="tableData" style="width: 100%">
        <!-- 采用 v-for 实现动态列 -->
        <template v-for="(item,column) in tableHeaderColumn">
            <template v-if="column === 0">
                <el-table-column label="日期" prop="name" width="80">
                    <el-table-column label="星期" prop="name" width="80"></el-table-column>
                </el-table-column>
            </template>
            <el-table-column :label="item.dayTime" width="60">
                <el-table-column :label="item.weekName" width="60">
                    <template scope="scope">
                        <!-- 这里实现复选框的绑定 -->
                        <el-checkbox v-model="scope.row.tableColumn[column]['checked']"></el-checkbox>
                    </template>
                </el-table-column>
            </el-table-column>
        </template>
    </el-table>
</div>

<script src="https://cdn.staticfile.org/vue/2.6.2/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 创建Vue实例对象
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                // 表格数据数组
                tableData: [
                    {
                        id: 1001,
                        name: '张三',
                        tableColumn: [
                            {
                                checked: false
                            },
                            {
                                checked: true
                            },
                            {
                                checked: false
                            },
                            {
                                checked: false
                            },
                            {
                                checked: true
                            }
                        ]
                    },
                    {
                        id: 1002,
                        name: '李四',
                        tableColumn: [
                            {
                                checked: true
                            },
                            {
                                checked: false
                            },
                            {
                                checked: false
                            },
                            {
                                checked: true
                            },
                            {
                                checked: true
                            }
                        ]
                    },
                    {
                        id: 1003,
                        name: '王五',
                        tableColumn: [
                            {
                                checked: false
                            },
                            {
                                checked: false
                            },
                            {
                                checked: false
                            },
                            {
                                checked: true
                            },
                            {
                                checked: false
                            }
                        ]
                    }
                ],
                // 表头数组
                tableHeaderColumn: [
                    {
                        dayTime: '1',
                        weekName: '一'
                    },
                    {
                        dayTime: '2',
                        weekName: '二'
                    },
                    {
                        dayTime: '3',
                        weekName: '三'
                    },
                    {
                        dayTime: '4',
                        weekName: '四'
                    },
                    {
                        dayTime: '5',
                        weekName: '五'
                    }
                ]
            };
        }
    });
</script>
</body>
</html>

到此，Vue+ElementUI实现多行表头以及表格动态列就完成啦。

相关文章