列筛选组件使用指南
拷贝 组件模块（ColumnFilter）, 注册为全局组件
拷贝 mixin（columnFilter.js）导入到 mixin 主文件
拷贝 列筛选按钮代码
<i
@click="columnHandler"
class="el-icon-setting column-btn"
title="筛选列"
v-if="columnFilterBoolean"
></i>
- 拷贝 类筛选组件代码
<column-filter
v-if="columnFilterShow"
:data="columnData"
@close="columnFilterClose"
@columnCheckboxChange="columnCheckboxChange"
/>
- 从 mixins 主文件，导入 columnFilter.js 文件
import { columnFilter } from '@/mixins/index'
- 在 mounted 钩子里获取列筛选原始数据
// 获取表格列数据（对原始数据做一份克隆，防止循环引用）
this.getColumnOriginData(_.cloneDeep(this.$refs.formTable.columns))
tips：formTable 是你页面了 table 的 ref 名称
- 如果你的 el-table-column 是 for 循环出来的则调用列筛选组件的回调方法即可
columnCheckboxChange(curColumns) {
// columnsOrigin是你定义的列数据源[{prop: 'test', label=‘测试’}, {prop: 'test2', label=‘测试2’},]
this.columnsOriginData = columnsOriginData.filter(item => {
const flag = curColumns.find(cell => {
return item.prop === cell.property && cell.checked
})
return flag
})
// 修复部分版本element-ui表格高度塌陷问题
this.$nextTick(_ => {
this.$refs.formTable.doLayout()
})
}
- 如果你的 el-table-column 是一个一个手写的则添加 v-if 属性，调用 checkColumn 方法传入 prop 值
<el-table-column
label="测试"
prop="test"
v-if="checkColumn('test')"
></el-table-column>
