Element Table 增加搜索功能

tianyawhl

发布于 2020-02-25 12:30:25

7.2K00

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：0

代码可运行

我们经常会用到搜索，可以使用计算属性：

      <!-- 表格搜索框 -->
      <el-input
        v-model="searchContent"
        placeholder="搜索1"
        size="medium"
        style="width:200px;float:right;margin-bottom:10px;"
      ></el-input>

      <el-table :data="filterData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>

  //搜索数据
  computed: {
    filterData: function() {
      var input = this.searchContent && this.searchContent.toLowerCase();
      var items = this.tableData;
      var items1;
      if (input) {
        items1 = items.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        items1 = items;
      }
      return items1;
    }
  }

但是如果有多个table都要搜索，最好使用方法，因为可以传参数（tableData 表格数据；searchContent:输入框内容）

      <el-table :data="filterData2(tableData,searchContent)" style="width: 100%" v-if="isShowTable2">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>

    filterData2(data,searchContent) {
      //var input = this.searchContent && this.searchContent.toLowerCase();
      var input = searchContent.toLowerCase()
      var items = data;
      var items1;
      if (input) {
        items1 = items.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        items1 = items;
      }
      return items1;
    },

总结：单个表格搜索可以使用计算属性，多个表格通过调用同一个过滤函数，这样避免代码冗余。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除