Vue.js+ElementUI 可变列表格（Table）
程序员文章站
2024-03-21 16:49:46
...
环境：Visual Studio 2015，.NET Framework 4.5.2，ASP.NET MVC5，Vue.js，Element UI
什么叫可变列表格？
顾名思义，就是Table的Column的数量是可变的，可能是3个、4个，或者5个。
如下图：
那么，可变列列表的应用场景是什么？
通常，在开发的过程中，总是会遇到在一个列表中根据不同的用户角色和业务场景，展示不同的内容给用户看的需求。
这个时候，我们的可变列表格就有登场的机会了。
当然，你也可以通过v-if控制显示的列。
但是，我觉得用可变列表格的方式可以更灵活、省事。
不仅是这种情况，在所有的需要表格的列的数量不固定的情景中都可以用，比如数据列表模板什么的。
怎么实现可变列表格？或者说具体思路是怎么样的？
1、我们先提出一个设想，在element中，table是由很多个el-table-column构成的，那么我们可不可以通过循环el-table-column构造一个table？
2、要循环el-table-column，那么我们就需要一个由多个列组成的集合，他有3个字段，分别是列名、列显示文本和列宽，如下
tableCols1: [
{
name: "date",
label: "日期",
width: 180
},
{
name: "name",
label: "姓名",
width: 180
},
{
name: "address",
label: "地址",
width: 280
},
]
3、利用v-for循环列集合，构造列表，把name、label、width绑定到el-table-column
<el-table v-bind:data="tableData1" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
<el-table-column v-for="item in tableCols1"
v-bind:prop="item.name"
v-bind:label="item.label"
v-bind:width="item.width">
</el-table-column>
</el-table>
4、绑定数据
tableData1: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
5、可变列表格就此完成，效果如下
全部代码，粘上去就可以看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<template>
<el-table v-bind:data="tableData1" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
<el-table-column v-for="item in tableCols1"
v-bind:prop="item.name"
v-bind:label="item.label"
v-bind:width="item.width">
</el-table-column>
</el-table>
<br /><br />
<el-table v-bind:data="tableData2" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
<el-table-column v-for="item in tableCols2"
v-bind:prop="item.name"
v-bind:label="item.label"
v-bind:width="item.width">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData1: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableCols1: [
{
name: "date",
label: "日期",
width: 180
},
{
name: "name",
label: "姓名",
width: 180
},
{
name: "address",
label: "地址",
width: 280
},
],
tableData2: [{
num: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
num: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
num: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
num: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableCols2: [
{
name: "num",
label: "#",
width: 80
},
{
name: "date",
label: "日期",
width: 180
},
{
name: "name",
label: "姓名",
width: 180
},
{
name: "address",
label: "地址",
width: 280
}
]
}
},
methods: {
tableRowClassName: function (obj) {
if (obj.rowIndex % 2 == 0) {
return 'warning-row';
} else {
return 'success-row';
}
return '';
}
}
});
</script>
</html>
效果图
下一篇： Ubuntu安装MySQL8.0