这周工作中，遇见了一个表格动态列的需求，这记录一下如何使用Vue和ElementUI实现表格多行表头以及表格动态列的功能。
目录
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实现多行表头以及表格动态列就完成啦。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134503.html
