element table手动实现自定义筛选（手动实现）

先看效果图

一、前言

甲方放着好好的导出，好好的excel的高级筛选不用，非要在网页中实现一个。。。。

最开始尝试使用的element官方的筛选，给甲方看后 说和excel的筛选相差很大。。好在官方有提供自定义表头，那自己手动实现一个了。最后有完整代码

其实此功能挺简单的，只不过麻烦一点。我把筛选分为了四个类型

1. txt 文本型  （就是input输入框）
2. scope 范围型 （查询金额区间）
3. date 时间型 （查询日期）
4. select 下拉框 （就是下拉框呗）

整体逻辑就是：子组件把筛选好的数据，给父组件，父组件进行筛选过滤，再给table展示

二、父组件

分为两个部分

1.tag部分，显示所用到的筛选条件

2.table部分

html

   
    

      条件：
      
        {{ tag.label }} ：{{ tag.value.value1 }}
        - {{ tag.value.value2 }}
      
    
    
    
      
    

custom-header 为子组件，里面写着四个类型的代码

父data里的数据

  data() {
    return {
      customFlag: false, // 自定义筛选是否显示
      customParams: {}, //自定义筛选参数
      conditionList: [], //自定义筛选条件
      labelColorList: [], //已经在使用的筛选条件，染色用
      // table数据
      tableData: [],
      // table数据 拷贝，我们不操作原数据
      tableDataCopy: [],
      // table配置
      tableConfig: [
        {
          label: "姓名",
          prop: "name",
          width: "150px",
          conditionType: "txt", // 条件类型
        },
        {
          label: "身价",
          prop: "amount",
          width: "150px",
          conditionType: "scope", // 条件类型
        },
        {
          label: "生日",
          prop: "date",
          width: "150px",
          conditionType: "date", // 条件类型
        },
        {
          label: "所在城市",
          prop: "city",
          conditionType: "select", // 条件类型
          conditionListName: "cityList", //条件类型下拉框数据
          fuzzyQuery: false, //是否模糊查询
        },
        {
          label: "所在城市（模糊查询）",
          prop: "city2",
          conditionType: "select", // 条件类型
          conditionListName: "cityList", //条件类型下拉框数据
          fuzzyQuery: true, //是否模糊查询
        },
      ],
    };
  },

tableConfig里的数据会被el-table遍历

其中：

        conditionType ： 条件的类型，前言已经说了就是那四个类型（txt,scope,date,select）

        conditionListName：  如果是select类型的话，肯定有下拉框数据对吧，这个就是下拉框数据的List名，只是名字不是数据哦（不明白的话看到子组件那里就懂了）

        fuzzyQuery：是否模糊查询

父methods几个关键方法

  methods: {
    // 请求下拉框数据
    getCustomData() {},
    //给使用筛选条件的标题加颜色
    setlabelColor() {},
    //自定义检索发射出来的事件
    tableUpdate() {},
    //筛选数据
    customSearch() {},
  }

getCustomData（）：汇总下拉框的数据

customSearch（）：筛选逻辑处理，后面想改筛选的逻辑就来这。后面贴出的完整代码里写的也很清楚，不明白可以问我

三、子组件

接收的props

column：当前列数据，用于显示表头

tableConfig ：处理类型判断

customParams ：select下拉框数据

labelColorList ：正在使用的筛选条件，染色用

computed

  computed: {
    selectList() {
      return function (data) {
        return this.customParams[data.conditionListName];
      };
    },
  },

根据下拉框名称，找到对应的下拉框List数据

其他没什么说的，子组件比较简单，看完整代码一眼就明白了

四、完整代码

父组件

 子组件

肯定有写的不完美的地方，请指教

附录：手动实现自定义筛选后，点击下拉框被排序问题