el-tabl 表头自定义筛选过滤

主要代码 renderHeader属性

<el-table-column align="center" prop="customerCode" label="客户编码" min-width="120" sortable :render-header='renderHeader'></el-table-column>

封装组件

<template>
  <el-dropdown trigger="click" ref='dropdownRef'>
    <i class="el-icon-arrow-down"></i>
    <el-dropdown-menu slot="dropdown" class='dropdown'>
      <el-input v-model="search" size='mini' placeholder="请输入过滤内容" />
      <el-checkbox-group v-model="checkList" class="checkbox-group">
        <el-checkbox :label="item.value" class="checkbox" v-for="(item, index) in dataList" :key='index'>{{ item.value }}</el-checkbox>
      </el-checkbox-group>
      <div class='line'></div>
      <div class='button'>
        <el-button :disabled="checkList.length === 0" type='text' @click='select'>筛选</el-button>
        <el-button type='text' @click="reset">重置</el-button>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'filterData',
  props: {
    dataArr: {
      type: Array,
      default: () => []
    },
    property: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      search: '',
      visible: false,
      checkList: [],
      dataList: [],
      defaultData: []
    }
  },
  watch: {
    search(newVal) {
      this.handleData(newVal)
    },
    dataArr(newVal) {
      this.defaultData = newVal
      this.dataList = newVal
    }
  },
  methods: {
    handleData(newVal) {
      this.dataList = this.defaultData.filter(item => {
        if (item.value === null) return newVal === ''
        if (typeof item.value === 'string') {
          return item.value.includes(newVal)
        }
        return item.value.toString().includes(newVal)
      })
    },
    select() {
      this.search = ''
      this.$emit('updateFilterData', { data: this.checkList, property: this.property })
      this.$refs.dropdownRef.hide()
    },
    reset() {
      this.search = ''
      this.checkList = []
      this.$emit('updateFilterData', { data: this.checkList, property: this.property })
      this.$refs.dropdownRef.hide()
    }
  }
}
</script>

<style scoped lang='scss'>
.checkbox-group {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.checkbox {
  margin: 4px 0;
}
.dropdown {
  min-width: 100px;
  padding: 8px;
}
.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /deep/ span {
    color: #606266;
  }
}
.dis-button {
  /deep/ span {
    color: #C0C4CC !important;
  }
}
.line {
  width: 100%;
  border-top: 1px dashed #e5e5e5;
}
/deep/ .el-icon-arrow-down {
  font-family: iconfont !important;
  font-size: 17px;
  transform: unset;
  margin-top: 2px;
}
/deep/.el-icon-arrow-down:before {
  content: "\e91d" !important;
}
</style>

import FilterData from './filterData.vue'
export default {
  data() {
    return {
      oldData: []
    }
  },
  methods: {
    updateFilterData(params) {
      const { data, property } = params
      this.filterListData[property] = data
      let arr = this.oldData
      for (const item of Object.keys(this.filterData)) {
        if (item === 'labelListDto') {
          if (this.filterListData[item].length !== 0) {
            arr = arr.filter(it => {
              const boolArr = it.labelListDto.map(val => this.filterListData[item].includes(val.name))
              let bool = false
              boolArr.forEach(e => {
                if (e) bool = e
              })
              return bool
            })
          }
        } else {
          if (this.filterListData[item].length !== 0) {
            arr = arr.filter(it => this.filterListData[item].includes(it[item]))
          }
        }
      }
      this.AllData = arr
    },
    renderHeader(h, { column, $index }) {
      return h('div', {
        style: 'display: flex',
        on: {
          click: function(event) {
            event.stopPropagation()
          }
        }
      }, [
        h('div', column.label),
        h(FilterData, { props: { 'data-arr': this.filterData[column.property], property: column.property }, on: { updateFilterData: this.updateFilterData } })
      ])
    }
  }
}

使用方式 引入import filterData from './filterData'

export default {
  data() {
    return {
      index: 0,
      filterListData: {},
      filterData: {},
      AllData: [],
      propertyNames: [
        'allocationResultStatusName', 'routeCode', 'subOrderSnSum',
        'customerCodeSum', 'skuCodeSum', 'salesQuantitySum',
        'netWeightTotal', 'weightTotal', 'priceTotal',
        'excludeTaxPriceTotal', 'volumeTotal', 'minDispatchVolume', 'minDispatchWeight'
      ]
    }
  },
  mixins: [table, tableHeight, filterData],
  created() {
    this.getAllData()
    this.filterListData = this.propertyNames.reduce((obj, propertyName) => {
      obj[propertyName] = []
      return obj
    }, {})
  },
  watch: {
    AllData: function(newVal, oldVal) {
      this.getSearch()
    }
  },
  methods: {
    getAllData() {
      this.$axios.getLinkListApi(this.id).then(res => {
        this.AllData = res.data
        this.oldData = res.data
      })
    },
    getSearch() {
      this.index += 1
      if (this.index > 1) return
      const propertyNames = this.propertyNames

      const issetData = propertyNames.reduce((obj, propertyName) => {
        obj[propertyName] = []
        return obj
      }, {})

      const obj = propertyNames.reduce((obj, propertyName) => {
        obj[propertyName] = []
        return obj
      }, {})

      this.AllData.forEach(item => {
        propertyNames.forEach(propertyName => {
          if (issetData[propertyName].indexOf(item[propertyName]) === -1) {
            if (propertyName !== 'labelListDto') {
              issetData[propertyName].push(item[propertyName])
              obj[propertyName].push({ text: item[propertyName], value: item[propertyName] })
            } else {
              item[propertyName].map(it => {
                if (issetData[propertyName].indexOf(it.name) === -1) {
                  issetData[propertyName].push(it.name)
                  obj[propertyName].push({ text: it.name, value: it.name })
                }
              })
            }
          }
        })
      })
      this.filterData = obj
    },
    filterHandler(value, row, column) {
      const property = column.property
      return row[property] === value
    }
  }
}