这边的方法怎么不改变原有的数组，给它赋值？

Question

这是个搜索框的方法，在不断输入的过程中会不断调用过滤出结果，因为方法最后把过滤数据赋值给原数据了，导致在回删的时候找不到结果，请问有好的办法吗？

  <el-select
    v-model="stepsModel[index].processIdMaterial"
    clearable
    filterable
    :filter-method="(val:any)=>{handleFilter(val,index)}"
  >
    <el-option
      v-for="(item2) in stepsProductList[index]"
      :key="item2.materialCode"
      :label="item2.materialName"
      :value="item2.materialCode"
    />
  </el-select>



const handleFilter = (e:string, index:number) => {
  const res:any[] = []
  stepsProductList.value[index].forEach((i:any) => {
    if (i.materialSpec.indexOf(e) > -1) {
      res.push(i)
    }
  })
  stepsProductList.value[index] = res
}

Answer 1

你得先用一个数据保存原有的没筛选的数组吧，不然你删选之后就找不到所有数据了

const allList = ref([])
// 把所有列表保存到 allList
allList.value = xxx
// 然后用 allList 筛选
const handleFilter = (e:string, index:number) => {
  stepsProductList.value[index] = allList.value.filter(item => item.materialSpec.includes(e))
}

Answer 2

你可以创建一个临时变量，tempSeacrhSource(数组类型)，然后对数据源stepsProductList进行深拷贝：const tempSeacrhSource = deepClone(stepsProductList)。其中tempSeacrhSource变量用来做搜索用。