js文件
/*
* 动态表头配置
* @Ace
* */
//动态表头
export const colSelect = [
{
'label':'案件名称',
'prop':'caseName',
'minWidth':150,
'align':'center'
},{
'label':'办案部门',
'prop':'name',
'align':'center',
'minWidth':120,
},{
'label':'办案区',
'prop':'roomName',
'align':'center',
'minWidth':120,
},{
'label':'实际入区时间',
'prop':'createTime',
'align':'center',
'width':150,
},{
'label':'实际出区时间',
'prop':'leaveTime',
'align':'center',
'width':150,
}
];
//默认表头
export const colOptions = ['caseName','name','roomName','createTime','leaveTime'];
vue文件
import {colOptions,colSelect} from './tableConfig.js';
colOptions,//表头默认配置
colSelect,//动态表头数据
watch:{
colOptions(valArr) {
this.key = this.key + 1;
}
},
computed:{
formTheadOptions(){//计算属性 动态显示
let valArr = this.colOptions;
return this.colSelect.filter(i => valArr.indexOf(i.prop) >= 0);
}
},
<el-table
:data="tableData"
v-loading="listLoading"
element-loading-spinner="iconfont icon-loading zy-icon-loading"
size="small"
:height="tableH"
stripe
:key="key"
ref="table"
>
</el-table>
<el-table-column
v-for="(item,index) in formTheadOptions"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width || ''"
:min-width="item.minWidth || ''"
:align="item.align || 'left'"
>
</el-table-column>
<!--表头设置-->
<el-popover
width="200"
placement="left"
trigger="click"
>
<i slot="reference" class="fixedSetting el-icon-setting" style="cursor:pointer;margin-left:5px;"></i>
<el-select v-model="colOptions" multiple collapse-tags placeholder="请选择">
<el-option v-for="(item,index) in colSelect" :key="index" :label="item.label" :value="item.prop">
</el-option>
</el-select>
</el-popover>
<!--表头设置-->