2020-02-26

列筛选组件使用指南

1. 拷贝 组件模块（ColumnFilter）, 注册为全局组件

2. 拷贝 mixin（columnFilter.js）导入到 mixin 主文件

3. 拷贝 列筛选按钮代码

4. 拷贝 类筛选组件代码

5. 从 mixins 主文件，导入 columnFilter.js 文件

import { columnFilter } from '@/mixins/index'

6. 在 mounted 钩子里获取列筛选原始数据

// 获取表格列数据（对原始数据做一份克隆，防止循环引用）
this.getColumnOriginData(_.cloneDeep(this.$refs.formTable.columns))

tips：formTable 是你页面了 table 的 ref 名称

7. 如果你的 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()
    })
 }

8. 如果你的 el-table-column 是一个一个手写的则添加 v-if 属性，调用 checkColumn 方法传入 prop 值