vue页面:
<TableCom :tableConfig="tableConfig" :cellStyle="cellStyle" :pageConfig="pageConfig" @refresh="generateData" ref="table"> <template v-slot:btn> <el-popover class="popover" placement="bottom" title="列筛选" trigger="click"> <el-checkbox-group v-model="checkList" @change="filter"> <el-checkbox v-for="(item, index) in tableConfig.tableHeader" :label="item.prop" :key="index" > {{ item.label }} el-checkbox> el-checkbox-group> <el-button size="medium" slot="reference" ><i class="el-icon-arrow-down el-icon-menu">i >el-button> el-popover> template> <template v-slot:screen> <Screen v-if="isScreen" :systemData="systemData" /> template>TableCom>
ts:
private tableConfig: any = { tableHeader: [ { prop: 'code', label: '空调编号', minWidth: 100, visible: false }, { prop: 'sjsj', label: '数据时间', minWidth: 160, visible: true }, { prop: 'kgjzt', label: '开关机', minWidth: 70, visible: true }, ], tableData: [], loading: true }; private checkList: string[] = []; // 筛选列选中的数据列表 created() { this.init(); } // 初始化函数 init() { for (let item of this.tableConfig.tableHeader) { if (item.visible) { this.checkList.push(item.prop); } } } // 控制隐藏显示的函数 filter(val: any) { for (let header of this.tableConfig.tableHeader) { header.visible = val.includes(header.prop); } }