列表tableData筛选第一次切换筛选，没有问题 可是当我添加列表多一条的数据 再次点击筛选 列表所有会被清空？

Question

<div class="search-btn">
  <Form ref="formInline" :model="searchList" :label-width="90">
    <template>
      <Row style="display: flex;">
        <i-col>
          <FormItem label="样品类型：" style="width: 333px">
            <lab-default-select placeholder="选中样品模板名称" @on-change="handlechange" clearable>
              <Option v-for="item in templateTypeOptions" :value="item.tempName" :key="item.tempName">
                {{ item.tempName }}
              </Option>
            </lab-default-select>
          </FormItem>
        </i-col>
        <i-col>
          <Button type="ghost" style="margin-left: 10px;" @click="handlesubmit">确定</Button>
        </i-col>
      </Row>
    </template>
  </Form>
</div>

 data() {
   return {
    tableData: [],
    originalTableData: [], // 添加一个数组存储原始数据的副本
    coseid: "",
    };
  },
methods: {
  handleFetchData() {
    // 获取数据的逻辑
    this.tableData = ...;
    this.originalTableData = [...this.tableData]; // 将获取到的数据赋值给 originalTableData
  },
  handleSubmit() {
    const filteredData = this.tableData.filter(v => v.num === this.coseid);
    if (filteredData.length > 0) {
      this.tableData = filteredData;
    } else {
      this.tableData = [...this.originalTableData]; // 如果没有匹配到数据，还原为原始数据
    }
  },
},

代码如下：

copyClick(this: any, val) {
  for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i],this.tableData[i][val]
      }
 }

期望触发了事件页面上就更新数据

Answer 1

调试一下看看你那里操作导致的：

handleSubmit() {
  console.log("Before filtering:", this.tableData);

  const filteredData = this.tableData.filter(v => v.num === this.coseid);
  console.log("Filtered data:", filteredData);

  if (filteredData.length > 0) {
    this.tableData = filteredData;
  } else {
    this.tableData = [...this.originalTableData]; // 如果没有匹配到数据，还原为原始数据
  }

  console.log("After filtering:", this.tableData);
}