<vxe-table
   ref="vxeTableRef"
   :data="state.tableData"
   height="100%"
   border
   @filter-change="handleFilterChange"
 >
   <vxe-column
     v-for="colOpt in columnsOptions"
     :key="colOpt.field"
     :field="colOpt.field"
     :title="colOpt.title"
     align="center"
     resizable
     sortable
     :filters="colOpt.filters"
     :filter-method="colOpt.filterMethod"
   />
 </vxe-table>

<script setup lang="ts">
// 其他代碼
const vxeTableRef = ref();

const handleSearch = () => {
	// 獲取table數(shù)據(jù)部分的邏輯
	API(params).then((res: any) => {
	    // ...
	    state.tableData = data || [];
	    if (state.tableData.length > 0) {
	      // 在數(shù)據(jù)加載后重置所有篩選
	      nextTick(() => {
	        if (vxeTableRef.value) {
	          vxeTableRef.value.clearFilter();
	        }
	      });
	    }
  });
}

// 下面是處理列篩選的邏輯
// 獲取篩選選項(xiàng)
const getColumnFilters = (column: string) => {
  // 使用 Map 來提高性能
  const uniqueMap = new Map();

  for (const row of state.tableData) {
    const value = row[column];
    if (!uniqueMap.has(value)) {
      uniqueMap.set(value, {
        label: value == null || value == "" ? "(空)" : String(value),
        value: value,
        checked: false
      });
    }
  }

  return Array.from(uniqueMap.values());
};

// 創(chuàng)建篩選方法
const createFilterMethod = (column: string) => {
  return ({ value, row }: { value: any; row: any }) => {
    const cellValue = row[column];

    // 處理空值的情況
    if (value === null || value === "") {
      return cellValue === null || cellValue === "";
    }

    // 如果單元格值是數(shù)字，進(jìn)行數(shù)字比較
    if (typeof cellValue === "number") {
      return cellValue === Number(value);
    }

    // 默認(rèn)進(jìn)行字符串比較
    return String(cellValue) === String(value);
  };
};

// 數(shù)據(jù)是異步加載的，使用計(jì)算屬性來處理列配置
const columnsOptions = computed(() => {
  return state.columns.map(col => ({
    field: col,
    title: col,
    filters: getColumnFilters(col),
    filterMethod: createFilterMethod(col)
  }));
});

// 處理篩選變化
const handleFilterChange = (params: any) => {
  // 獲取當(dāng)前表格中可見的行數(shù)據(jù)
  const { filterList } = params;
  // 如果沒有篩選項(xiàng)，就刷新
  if (!filterList || filterList.length === 0) {
    handleSearch();
  }

  // 篩選已經(jīng)應(yīng)用，獲取處理后的可見數(shù)據(jù)
  const visibleData = vxeTableRef.value?.getTableData().visibleData || [];

  // 獲取當(dāng)前被篩選的列，避免修改它們的篩選項(xiàng)
  const filteredColumns = new Set(filterList.map((item: any) => item.field));

  // 更新篩選狀態(tài)
  nextTick(() => {
    // 只更新未被篩選的列
    state.columns.forEach(column => {
      // 跳過當(dāng)前正在篩選的列
      if (filteredColumns.has(column)) return;

      // 為此列生成新的篩選選項(xiàng)，但僅從可見數(shù)據(jù)中獲取
      const uniqueMap = new Map();
      for (const row of visibleData) {
        const value = row[column];
        if (!uniqueMap.has(value)) {
          uniqueMap.set(value, {
            label: value == null || value === "" ? "(空)" : String(value),
            value: value,
            checked: false
          });
        }
      }

      // 更新此列的篩選項(xiàng)
      if (vxeTableRef.value) {
        vxeTableRef.value.setFilter(column, Array.from(uniqueMap.values()));
      }
    });
  });
};
</script>