什么叫可變列表格？
顧名思義，就是Table的Column的數(shù)量是可變的，可能是3個(gè)、4個(gè)，或者5個(gè)。
如下圖：
那么，可變列列表的應(yīng)用場(chǎng)景是什么？
通常，在開發(fā)的過程中，總是會(huì)遇到在一個(gè)列表中根據(jù)不同的用戶角色和業(yè)務(wù)場(chǎng)景，展示不同的內(nèi)容給用戶看的需求。
這個(gè)時(shí)候，我們的可變列表格就有登場(chǎng)的機(jī)會(huì)了。
當(dāng)然，你也可以通過v-if控制顯示的列。
但是，我覺得用可變列表格的方式可以更靈活、省事。
不僅是這種情況，在所有的需要表格的列的數(shù)量不固定的情景中都可以用，比如數(shù)據(jù)列表模板什么的。
怎么實(shí)現(xiàn)可變列表格？或者說具體思路是怎么樣的？
1、我們先提出一個(gè)設(shè)想，在element中，table是由很多個(gè)el-table-column構(gòu)成的，那么我們可不可以通過循環(huán)el-table-column構(gòu)造一個(gè)table？
2、要循環(huán)el-table-column，那么我們就需要一個(gè)由多個(gè)列組成的集合，他有3個(gè)字段，分別是列名、列顯示文本和列寬，如下
tableCols1: [
{
name: "date",
label: "日期",
width: 180
},
{
name: "name",
label: "姓名",
width: 180
},
{
name: "address",
label: "地址",
width: 280
},
]
3、利用v-for循環(huán)列集合，構(gòu)造列表，把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、綁定數(shù)據(jù)
tableData1: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
5、可變列表格就此完成，效果如下
全部代碼，粘上去就可以看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" >
<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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
num: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
num: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
num: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 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>
效果圖
原文鏈接：https://blog.csdn.net/u012835032/article/details/108935788
仿照博主的代碼寫了一個(gè)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>
上述代碼存在兩個(gè)問題
1、查詢出的結(jié)果是多條的時(shí)候有橫向滾動(dòng)條，當(dāng)查詢出的數(shù)據(jù)只有一條時(shí)，橫向滾動(dòng)條不出現(xiàn)。
解決方案
直接在<el-table>標(biāo)簽上的<div> 標(biāo)簽上固定寬度，注意這個(gè)值要設(shè)置的大一些
<div style="width: 1500px">
2、使用height="430px" 當(dāng)數(shù)據(jù)只有一條時(shí)，會(huì)有很大空白
如圖：
解決方案
給<el-table> 標(biāo)簽上的height="430px" 換成max-height="430px" 這樣表格就能根據(jù)返回?cái)?shù)據(jù)的多少自動(dòng)定位了。
<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>
改完之后
