antd表头搜索切换表数据后无法清除搜索内容，该怎么解决？

Question

表数据和表头数据都是从接口获取到的，在左侧菜单切换后，通过watch判断菜单的参数变了就更新表格数据。
现在出现了一个问题，在图一逆变器基本信息表这里搜索了34，然后切换到图二PCS表时，这个34还在搜索框中，这个问题该怎么解决？
图一：

图二：

vue部分：

    <a-table
        :row-selection="rowSelection"
        :data-source="dataSource"
        :columns="columns"
        :pagination="false"
        :scroll="{
          y: 500,
          x:
            columns.length > 1 && columns.length <= 10
              ? 800
              : columns.length > 10 && columns.length <= 14
              ? 1800
              : columns.length > 14 && columns.length <= 21
              ? 2900
              : columns.length > 21 && columns.length <= 28
              ? 3500
              : 8000,
        }"
        :row-class-name="rowClassName"
      >

        <template
          #customFilterDropdown="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
        >
          <div style="padding: 8px">
            <a-input
              ref="searchInput"
              :placeholder="`输入查询内容！`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block"
              @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
              重置
            </a-button>
          </div>
        </template>
</a-table>

表头搜索方法：

const handleSearch = (selectedKeys, confirm, dataIndex) => {
  const foundItem = listArr2.find((item) => item.key === dataIndex);
  const searchText = selectedKeys[0];
  state.searchText = escapeRegExp(searchText); // 去除有问题的搜索文本
  state.searchedColumn = dataIndex;
  let matchingKeys = [];
  if (foundItem) {
      // 此处省略部分转义文本的操作
    if (column) {
      if (matchingKeys.length == 0) {
       // 此处省略数据操作
      } else {
        message.success("搜索完成", 0.75);
        column.filteredValue = matchingKeys.length > 0 ? matchingKeys : [];
        confirm();
      }
    }
  } else {
    const column = state.headerListJK.find((col) => col.dataIndex == dataIndex);
    if (column) {
      column.filteredValue = [searchText];
      console.log(column);
      message.success("搜索完成", 0.75);
      confirm();
    }
  }
 column.filteredValue = [searchText]; 
};

表头重置方法：

const handleReset = (clearFilters) => {
  clearFilters({
    confirm: true,
  });
  searchInput.value = "";
  state.searchText = "";
  state.searchedColumn = ""; // 清除当前搜索的列
  state.headerListJK.forEach((column) => {
    if (column.filteredValue) {
      column.filteredValue = [];
    }
  });
};

watch方法

watch(
  () => props.sheetList,
  async (newValue) => {
    nextTick(() => {
      searchInput.value = "";
      selectedKeys.value = null;
      state.searchText = "";
      state.searchedColumn = "";
      // 重置所有列的 filteredValue
      state.headerListJK.forEach((column) => {
        if (column.filteredValue) {
          column.filteredValue = [];
        }
      });
    });
    getData();
  },
  { immediate: true }
);

根据表头中的参数set，对各表的表头添加搜索功能

let searchInput = ref();

const getOpList = () => {
  state.headerListJK.forEach((item) => {
    const column = item;
    if (item.set === "搜索") {
      column.customFilterDropdown = true;
      column.onFilter = (value, record) => {
        const cellValue = record[item.key];
        // 确保 cellValue 不是 null 或 undefined
        return (
          cellValue != null &&
          cellValue.toString().toLowerCase().includes(value.toLowerCase())
        );
      };
     column.onFilterDropdownOpenChange = (visible) => {
        // console.log(value, record, searchInput); // 表头加载阶段不能用
        if (visible) {
          setTimeout(() => {
            searchInput.value.focus();
          }, 100);
        }
      };
}

Answer 1

改一下watch 方法，切换时候重置搜索状态：

watch(
  () => props.sheetList,
  async (newValue) => {
    state.searchText = '';
    state.searchedColumn = '';
   
    state.headerListJK.forEach((column) => {
      if (column.filteredValue) {
        column.filteredValue = [];
      }
    });
    
    nextTick(() => {
      if (searchInput.value) {
        searchInput.value.input.value = '';
      }
      
      if (selectedKeys.value) {
        selectedKeys.value = [];
      }
    });
    
    await getData();
  },
  { immediate: true }
);

handleReset 方法：

const handleReset = (clearFilters) => {
  clearFilters({
    confirm: true,
  });
  
  if (searchInput.value && searchInput.value.input) {
    searchInput.value.input.value = '';
  }
  
  state.currentSearchText = '';  
  state.searchText = '';
  state.searchedColumn = '';
  
  state.headerListJK.forEach((column) => {
    if (column.filteredValue) {
      column.filteredValue = [];
    }
  });
};

加key:

<a-table
  :key="props.sheetList"  
  :row-selection="rowSelection"
  :data-source="dataSource"
  :columns="columns"
  :pagination="false"
  ...其他属性
>

用 v-model：

<template #customFilterDropdown="{
  setSelectedKeys,
  selectedKeys,
  confirm,
  clearFilters,
  column,
}">
  <div style="padding: 8px">
    <a-input
      ref="searchInput"
      v-model:value="state.currentSearchText"  <!--用 v-model -->
      :placeholder="`输入查询内容！`"
      style="width: 188px; margin-bottom: 8px; display: block"
      @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
      @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
    />
    <!-- 其他内容 -->
  </div>
</template>

在 setup：

const state = reactive({
  currentSearchText: '',  
  // ... 
});

watch(
  () => props.sheetList,
  () => {
    state.currentSearchText = '';
    // ... 
  }
);