【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法

效果图

代码

html

      <el-table
        :data="tableData"
        stripe
        style="width: 100%; margin-bottom: 30px"
        size="mini"
        height="480px"
      >
        <el-table-column prop="date" label="日期" min-width="180">
        </el-table-column>
        <el-table-column prop="video" label="视频" min-width="180">
        </el-table-column>
        <el-table-column prop="images" label="图片"> </el-table-column>
        <el-table-column prop="download" label="下载">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="download_erweima(scope.row)"
              >生成二维码</el-button
            >
          </template>
        </el-table-column>
      </el-table>

data：这是模拟的，后台拿的数据也一样再弄一个变量赋值一份

      //表格
      tableData: [
        {
          date: "2016-05-01",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-02",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-03",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-04",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-05",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-01",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-02",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-03",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-04",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-05",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
      ],
      tableDatas: [
        {
          date: "2016-05-01",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-02",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-03",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-04",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-05",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-01",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-02",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-03",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-04",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
        {
          date: "2016-05-05",
          video: "A1.MPG",
          images: "A1.ZIP",
        },
      ],
      //搜索框输入值
      search_erweima: "",

methods：这个是方法

解释一下：search_erweima是搜索输入的值。然后判断是否为空，空就把备份数据赋值给tableData 以此达到让表格恢复原状的目的，如果不是空的就是有值，那就根据这个值filter筛选一下把条件为true的数据返回，includes方法是判断这个输入的值是否在数据中存在，如果有就返回true。这就搞定了。

    inquire() {
      let fuzzy = this.search_erweima;
      if (fuzzy) {
        this.tableData = this.tableDatas.filter((item) => {
          return item.date.includes(fuzzy)
        });
      } else {
        this.tableData = this.tableDatas;
      }
    },

如果你需要多个条件判断写法
像这样加个&&号然后改下就行了，同理如果你需要多个条件，但是只要满足一个就行那就换成 ||

    inquire() {
      let fuzzy = this.search_erweima;
      if (fuzzy) {
        this.tableData = this.tableDatas.filter((item) => {
          return item.date.includes(fuzzy)&&item.age.includes(fuzzy)
        });
      } else {
        this.tableData = this.tableDatas;
      }
    },