在 vxe-table 中，filters 初始化有默认值，并实现的重置筛选条件恢复初始化高亮状态。重置筛选条件时clearFilter和setFilter恢复初始化默认值和高亮状态

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/145590752

在 vxe-table 中，filters 初始化有默认值，并实现的重置筛选条件恢复初始化高亮状态。重置筛选条件时恢复初始化默认值和高亮状态。实现方法如下

HTML

<template>
  <a-button @click="reset">重置</a-button>
  <div>
    <vxe-table
      ref="vuexTable"
      :columns="columns"
      :data="tableData"
      :filter-config="{ remote: true }"
      @filter-change="filterChangeEvent"
      @checkbox-change="selectChangeEvent"
    >
<vxe-table-column v-for="col in columns" :key="col.field"
                          :field="col.field" :title="col.title"
                          :min-width="col.minWidth || 100"
                          :filters="col.filters || null"
                          :filter-multiple="false">
</vxe-table>
    <button @click="resetFilters">重置筛选条件</button>
  </div>
</template>

JS：设置filters的checked属性可以实现初始化选中的筛选项

filters	数据筛选，配置筛选条件（注：筛选只能用于列表，如果是树结构则过滤根节点）	any[]
label	显示的值	string
value	实际的值	any
checked	默认是否选中	boolean	false
resetValue	重置时的默认值	any
data	自定义渲染的数据值（当使用自定义模板时可能会用到）	any

Event：


clear-filter	当用户点击清除所有筛选条件时会触发该事件	{ filterList, $event }

Methods:

setFilter(fieldOrColumn, options)	用于 filters，修改筛选列的选项（在筛选条件更新之后可以调用 updateData 函数处理表格数据）	Promise		fieldOrColumn: string \| ColumnInfo, options: []

 data () {
    return {

columns: [
       {field: 'groupCode', title: 'MarketingGroup', minWidth: 150},
        {
          field: 'groupEnabled',
          title: 'MarketingGroup状态',
          minWidth: 180,
          filters: [{ label: '已启用', value: 1, checked: true }, { label: '已禁用', value: 0, checked: false }]
        },
        {field: 'marketingName', title: 'Marketing', minWidth: 150},
        {
          field: 'enabled',
          title: 'Marketing状态',
          minWidth: 150,
          filters: [{ label: '已启用', value: 1, checked: true }, { label: '已禁用', value: 0, checked: false }]
        },
        {field: 'updatedDisplayName', title: '修改人', minWidth: 150},
        {field: 'updatedTime', title: '修改时间', minWidth: 150}
      ],

}，
mounted () {
    this.$nextTick(() => {
      this.setDefaultFilters()
    })
  },
methods： {

    // area状态筛选默认有值赋值到接口参数
    setDefaultFilters () {
      this.columns.forEach(column => {
        if (column.filters && column.filters.length > 0) {
          this.searchEnabled = column.filters[0].value
          this.current = 1
          this.getTableData()
        }
      })
    },
// 手动触发area状态筛选
    filterChangeEvent (filters) {
      if (filters.values.length) {
        this.searchEnabled = filters.values[0]
      } else {
        this.searchEnabled = ''
      }
      this.current = 1
      this.getTableData()
    },
    // 重置搜索条件
    reset () {
      this.searchVal = undefined
      this.searchEnabled = 1
const groupEnabledFilters = this.columns.find(item => 
item.field === 'groupEnabled').filters
      const enabledFilters = this.columns.find(item => 
item.field === 'enabled').filters
      // 重置 groupEnabled 列的筛选条件
      this.$refs.vuexTable.$refs.vxeTableInstance.setFilter('groupEnabled', groupEnabledFilters)
      // 重置 enabled 列的筛选条件
      this.$refs.vuexTable.$refs.vxeTableInstance.setFilter('enabled', enabledFilters)
    },
}