写在前面
需求：表格列动态加载、动态控制列显示隐藏、行多选/动态排序、列与数据都是后端返回（文章末尾附上后端数据返回格式，列前端写静态也行）。
一、效果：
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('请输入联系电话'));
} 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() { //获取表数据
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) { //如果有值发生变化，即多选框的已选项变化
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
}
})
}
}
}
三、后端返回数据格式
{ //列返回格式
"messageCode": "000000",
"message": "获取成功!",
"data": [
{
"eng": "id",
"chn": "序号",
"showHeader": "true",
"isSort": "true",
"id": "1"
},
{
"eng": "name",
"chn": "站点名称",
"showHeader": "true",
"isSort": "true",
"id": "2"
}]
}
{ //表格数据格式
"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
}
]
}
}
