什么叫可变列表格？
顾名思义，就是Table的Column的数量是可变的，可能是3个、4个，或者5个。
如下图：
image.png
image.png
那么，可变列列表的应用场景是什么？
通常，在开发的过程中，总是会遇到在一个列表中根据不同的用户角色和业务场景，展示不同的内容给用户看的需求。
这个时候，我们的可变列表格就有登场的机会了。
当然，你也可以通过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、可变列表格就此完成，效果如下
image.png
全部代码，粘上去就可以看效果
<!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>
效果图
image.png
原文链接：https://blog.csdn.net/u012835032/article/details/108935788
仿照博主的代码写了一个vue版本
<div>
<el-table :data="tableData" style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName" size="small" height="430px" border stripe>
<el-table-column v-for="(item,i) in tableColumns" :key= i :prop="item.name" :label="item.label" :width="item.width" />
</el-table>
</div>
上述代码存在两个问题
1、查询出的结果是多条的时候有横向滚动条，当查询出的数据只有一条时，横向滚动条不出现。
解决方案
直接在<el-table>标签上的<div> 标签上固定宽度，注意这个值要设置的大一些
<div style="width: 1500px">
2、使用height="430px" 当数据只有一条时，会有很大空白
如图：
image.png
解决方案
给<el-table> 标签上的height="430px" 换成max-height="430px" 这样表格就能根据返回数据的多少自动定位了。
<div style="width: 1500px">
<el-table :data="tableData" style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName" size="small" max-height="430px" border stripe>
<el-table-column v-for="(item,i) in tableColumns" :key= i :prop="item.name" :label="item.label" :width="item.width" />
</el-table>
</div>
改完之后
image.png
