寫在前面
需求：表格列動態(tài)加載奸笤、動態(tài)控制列顯示隱藏、行多選/動態(tài)排序哼鬓、列與數(shù)據(jù)都是后端返回（文章末尾附上后端數(shù)據(jù)返回格式监右，列前端寫靜態(tài)也行）。
一异希、效果：
image.png
二健盒、代碼
<el-button plain class="filter-item" slot="reference" type="primary" icon="el-icon-setting">列過濾</el-button>
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%;"
@sort-change="sortChange" @selection-change="selectNu"
>
<el-table-column
type="selection" @selection-change="selectNu"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column align="center"
v-for="(item,index) in colData"
v-if="colData[index].showHeader"
sortable="custom" :prop="item.eng"
:key="item.eng"
show-overflow-tooltip
:label="item.chn">
<template slot-scope="scope">
<span>{{ scope.row[item.eng]}} </span>
</template>
</el-table-column>
export default {
name: 'controlsTable',
components: { Pagination },
directives: { waves },
data() {
let checkPhones = (rule, value, callback) => {
if (value == '') {
callback(new Error('請輸入聯(lián)系電話'));
} else {
let phone = this.temp.phone;
if (phone != '') {
if (!/^1[3456789]\d{9}$/.test(phone)) {
callback(new Error('請輸入正確的手機號'));
}else{
callback();
}
}
}
};
return {
filterVisible: false,//過濾列操作隱藏
colOptions:[],//列過濾options
colSelect:[],//列過濾已選
colData:[], //列全部
multipleSelection:[],
tableKey: 0,
list: null,
LoginName:name,
name:'',
people:'',
total: 0
}
},
created() {
this.getListHeader();
this.getList();
},
methods: {
getListHeader(){ //獲取表頭
patrolTableListHeader().then(response => {
const {data} = response;
this.colData=data;
for(let j = 0,len = data.length; j < len; j++){
this.colOptions.push(data[j].chn);
if(data[j].showHeader==true){
this.colSelect.push(data[j].chn);
}
}
});
},
getList() { //獲取表數(shù)據(jù)
patrolTableList(this.listQuery,this.LoginName).then(response => {
this.list = response.data.items;
this.total = response.data.total;
setTimeout(() => {
this.listLoading = false
}, 1.0 * 1000)
});
},
sortChange(data) { //排序
const { prop, order } = data;
order == 'descending' ? this.listQuery.sort = '-' + prop : this.listQuery.sort = '+' + prop;
patrolTableList(this.listQuery,this.LoginName).then(response => {
this.list = response.data.items;
this.total = response.data.total;
setTimeout(() => {
this.listLoading = false
}, 1.0 * 1000)
});
},
selectNu(val) { //表格多選
this.multipleSelection=[];
this.rows=val;
val.forEach(({id})=>{
if(id){
this.multipleSelection.push(id);
}
});
return val;
}
},
watch: {
colSelect(newVal, oldVal) {
if (newVal) { //如果有值發(fā)生變化，即多選框的已選項變化
let arr = this.colOptions.filter(i => newVal.indexOf(i) < 0) // 未選中
this.colData.filter(i => {
if(arr.indexOf(i.chn) !== -1) {
i.showHeader = false
} else {
i.showHeader = true
}
})
}
}
}
三称簿、后端返回數(shù)據(jù)格式
{ //列返回格式
"messageCode": "000000",
"message": "獲取成功!",
"data": [
{
"eng": "id",
"chn": "序號",
"showHeader": "true",
"isSort": "true",
"id": "1"
},
{
"eng": "name",
"chn": "站點名稱",
"showHeader": "true",
"isSort": "true",
"id": "2"
}]
}
{ //表格數(shù)據(jù)格式
"messageCode": "000000",
"message": "獲取成功!",
"data": {
"total": 1,
"items": [
{
"id": 1,
"conditions": {},
"page": 0,
"limit": null,
"sortField": null,
"tokenName": null,
"createBy": 1,
"createDate": "2019-11-05 07:01:58",
"updateBy": 1,
"updateDate": "2019-11-05 07:01:59",
"remarks": null,
"version": 3,
"delFlag": "0",
"name": "11",
"foundTime": "2019-11-16 14:47:06",
"people": " 王",
"phone": "",
"describes": "這是一個問題",
"new": false,
"loginName": null
}
]
}
}
