表格的模糊搜索功能，前端也可以实现

今天学到了一个对于表格的模糊搜索，支持搜索全部列中文字的查询。

1. 首先是创建一个el-table

<el-table
      :data="tableData"
      height="600"
      style="width: 100%"
      :cell-style="rowClass"
      :header-cell-style="headClass"
    >
      <el-table-column prop="name" label="姓名" width="200" />
      <el-table-column label="学习进度" prop="progress">
        <template #default="scope">
          <el-progress
            type="line"
            :text-inside="true"
            :stroke-width="20"
            :percentage="scope.row.progress"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="grain" label="当前进行的活动" />
    </el-table>

2. 在table的上方添加一个输入框input

<el-input
      placeholder="请输入要搜索的内容"
      v-model="inputVal"
      @keyup.enter="search()"
      clearable
    >
    </el-input>

3. 声明

 data() {
    return {
      // 输入框的值
      inputVal: "",
      // 输入框搜索出来的值
      showTable: [],
      tableData: [],
    };

4. 监听输入框中的值，如果没有输入，则显示全部的数据

 watch: {
    //监听：如果为空，显示所有数据
    inputVal(item1) {
      if (item1 == "") {
        this.tableData = this.showTable;
      }
    },
  },
  //页面渲染时，显示所有的数据
  mounted() {
    this.showTable = this.tableData;
  },

5. 接下来是最重要的方法，搜索全部列的内容

     //搜索内容
    search() {
      const Search_List = [];
      let res1 = this.inputVal;
      const res = res1.replace(/\s/gi, "");
      let searchArr = this.showTable;
      searchArr.forEach((e) => {
        //绑定的table prop
        let name = e.name;
        let grain = e.grain;
        if (name.includes(res)) {
          if (Search_List.indexOf(e) == "-1") {
            Search_List.push(e);
          }
        }
        if (grain.includes(res)) {
          if (Search_List.indexOf(e) == "-1") {
            Search_List.push(e);
          }
        }
      });
      this.tableData = Search_List;
    },
  },