纯前端实现搜索el-table表格数据

根据输入框输入的值来对table表格进行筛选。不调接口。

小细节：

1.先对tabledata里面的数据进行深拷贝，防止搜索过滤之后更改了tabledata里面原本的数据。

监听搜索框输入的内容，当内容为空时，把深拷贝的数据重新赋值给tabledata

2.点击搜索按钮，在进行筛选之前，要先将筛选出的值组成的数组清空，以免出现重复点击搜索事件后，筛选的数据重复添加在表格中的问题。

const searchDeviceParams = ref("");
const searchData=ref([])
const TableData111=ref([])
const TableData=ref([])
// 输入设备关键字搜索
function searchDevices(){
//把选中的值清空，防止重复点击时重复添加进表格里
  searchData.value=[]
  TableData111.value.filter(item=>{
    if(item.deviceName.indexOf(searchDeviceParams.value)>-1){
      searchData.value.push(item)
    }
  })
  TableData.value=searchData.value
}

watch( () => searchDeviceParams.value, () => {
      if(searchDeviceParams.value==''){
        TableData.value=TableData111.value
      }
    })
function queding() {
  if (multipleSelection.value.length == 0) return;
  dialogVisible.value = false;
  multipleSelection.value.forEach((list, index) => {
    TableData.value.push(list);
    // 防止在表格中重复添加相同数据
    const map = new Map();
    const newArr = TableData.value.filter(v => !map.has(v.deviceId) &&         
    map.set(v.deviceId, 1));
    TableData.value=newArr
    //对tabledata的值进行深拷贝
    var objString = JSON.stringify(TableData.value);
    twiceTableData111.value = JSON.parse(objString);
  });
}