input 实时模糊过滤

let bmOptions = reactive([

  {

    value: 'Option1',

    label: 'Option1',

  },

  {

    value: 'Option2',

    label: 'Option2',

  },

  {

    value: 'Option3',

    label: 'Option3',

  }

])

//过滤部门值

// const filterBmValFun = () => {

//   let list = bmOptions.filter((item) => {

//     //item.label.includes(searchBm.value)

//     if (item.label.indexOf(searchBm.value) != -1) {

//       return item;

//     }

//   })

//   bmOptions = list

// }

2 完美版本

2-1

 <el-input v-model="input1" @input="changeEvent" class="w-50 m-2" placeholder="Please Input"

          :suffix-icon="Search" />

2-2

abc(params).then((res: any) => {

    if (res && res.success) {

      tableDatas.value = res.result//备份数据

      tableData.value = res.result;//原有数据

    }

  });

2-2

const changeEvent = () => {

  let _search = input1.value.toLowerCase();

  let newListData: [] = []; // 用于存放搜索出来数据的新数组

  if (_search) {

    let SZ: [] = [];

    if (tableData.value.length > 0) {

      SZ = tableData.value;

    } else {

      //原数组没有值 让备份数据重新赋值，作为模糊查询条件。

      SZ = tableDatas.value;

    }

    SZ.filter(item => {

      if (item.shortName.toLowerCase().indexOf(_search) !== -1) {

        newListData.push(item);

      }

    })

  }

  tableData.value = newListData;

  //输入框中无任何值，重新备份值赋值。

  if (!input1.value) {

    tableData.value = tableDatas.value;

  }

}