vxe-table 自定义头部筛选

<template>

  <div>

    <div v-for="(item, idx) in columnList" :key="idx">

      <!-- 使用 div 包裹内容并应用 v-for -->

      <vxe-table-column

        v-if="(item.isFilter === undefined || (item.isFilter !== undefined && item.isFilter === false))"

        :key="idx"

        :field="item.field"

        :title="item.title"

        :sortable="item.sortable"

        :min-width="item.minWidth"

        :align="item.align"

        :fixed="item.fixed"

        show-overflow-tooltip

      />

      <vxe-table-column

        v-else

        :key="idx"

        :field="item.field"

        :title="item.title"

        :sortable="item.sortable"

        :min-width="item.minWidth"

        :align="item.align"

        :fixed="item.fixed"

        :filter-method="(data) => filterMethod(data,(item.filtertype !== undefined && item.filtertype === 'select' ? item.searchobj.id : item.field),item.filtertype)"

        :filters="strpurchasetypecodeOptions"

        show-overflow-tooltip

      >

        <template class="custom-filter-container1" #filter="{ column, $panel }">

          <!-- 筛选容器 -->

          <div class="custom-filter-container">

            <!-- 筛选按钮 -->

            <div class="btn-box">

              <el-button type="text" :disabled="!column.filters[0].data" size="mini" @click="applyFilter(column, $panel)">筛选</el-button>

              <el-button type="text" size="mini" @click="restFn(column, $panel)">重置</el-button>

            </div>

            <!-- 输入框 -->

            <template v-for="(option, index) in column.filters">

              <el-input v-if="item.filtertype === undefined || item.filtertype !== 'select'" :key="index" v-model="option.data" class="my-input" type="type" placeholder="请输入" @input="$panel.changeOption($event, !!option.data, option)" />

              <XlVirtualSelect

                v-else

                :key="`filter-option-${index}`"

                v-model="option.data"

                filterable

                clearable

                class="filter-select"

                placeholder="请选择"

                :all-options="item.tablelist"

                :prop="item.searchobj"

                @change="$panel.changeOption($event, !!option.data, option)"

              />

            </template>

          </div>

        </template>

      </vxe-table-column>

    </div>

  </div>

</template>

<script>

import PinyinMatch from 'pinyin-match'

// searchobj 代表如果是下拉的话搜索的id，name两个参数，filtertype 代表是下拉还是输入框

export default {

  name: 'DynamicFilter',

  props: {

    columnList: {// 列表

      type: [Array],

      default: () => []

    },

    tableName: {// 表名

      type: [String],

      default: ''

    }

  },

  data() {

    return {

      strpurchasetypecodeOptions: [// 筛选默认数据

        { data: '' }

      ]

    }

  },

  methods: {

    filterMethod({ option, row }, serchName, type) {

      return (type !== undefined && type === 'select' ? (row[serchName] !== undefined ? row[serchName] * 1 === option.data : true) : (row[serchName] !== undefined ? PinyinMatch.match(row[serchName], option.data) : true))

    },

    applyFilter(column, $panel) {

      $panel.confirmFilter() // 确认筛选

    },

    restFn(column, $panel) {

      $panel.resetFilter()

    }

  }

}

</script>

<style scoped>

.custom-filter-container {

  display: flex;

  flex-direction: column;

  padding: 8px;

}

.custom-filter-container .el-button {

  margin-bottom: 4px;

}

.custom-filter-container .btn-box {

  border-bottom: 1px solid #dcdfe6;

  text-align: right;

}

</style>

<style>

.vxe-table--filter-template:has(.custom-filter-container) + .vxe-table--filter-footer {

  display: none;

}

</style>