Element Table 增加搜索功能

• 2020 年 2 月 25 日
• 筆記

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

      <!-- 表格搜索框 -->        <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;      },

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