element ui table 怎么实时搜索el-table的内容

一、前端相关：

 <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item>
        <el-input
          v-model="search"
          placeholder="关键词搜索"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

 

二、el-table配置： 注： 

:data="tables"

<el-table v-loading="loading" :data="tables" @selection-change="handleSelectionChange" max-height="640" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="资产编号" align="center" prop="id" v-if="columns[0].visible" />
      <el-table-column label="使用人" align="center" key="nickName" prop="user.nickName" v-if="columns[3].visible" />
      <el-table-column label="公司" align="center" key="deptName" prop="dept.deptName" v-if="columns[4].visible" />
      <el-table-column label="部门" align="center" key="childDeptName" prop="childDeptName" v-if="columns[5].visible"  width="100"/>
   　　.......
      <el-table-column label="借用时间" align="center" prop="borrowingDate" v-if="columns[14].visible" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.borrowingDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="键盘鼠标" align="center" prop="mouse"  v-if="columns[15].visible" />
      <el-table-column label="颜色" align="center" prop="colour"  v-if="columns[16].visible" />
      <el-table-column label="座机号" align="center" prop="landlineNumber"  v-if="columns[17].visible" />
      <el-table-column label="资产录入人" align="center" prop="employer"  v-if="columns[18].visible" />
      <el-table-column label="其他" align="center" prop="other" v-if="columns[19].visible" />
    </el-table>
    <div class="pagination-container">
        <el-pagination class="el-pagination" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[20, 30, 40, 60]"
                        :page-size="pageSize"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="parseInt(total)">
         </el-pagination>
      </div>

 

三、属性配置：

export default {
  name: "Assets",
  dicts: ['sys_assets_status'],
  components: { Treeselect },
  data() {
    return {
　　　　//数据集
　　 　assetsList: [],

// 关键字搜索
      search: '',
      // 总条数
      total: 0,
      // 总页数
      pageSize: 20,
      // 当前页
      currentPage:1,
    　　
　　　　........ 忽略其它

  computed:{
    //监控搜索框里的值
 tables() {
      let search = this.search;
      if(search){
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        this.lists = this.assetsList.filter(dataNews=> {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(dataNews).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(dataNews[key]).indexOf(search) > -1
          })
        })
        this.total = this.lists.length;
      }
      return this.lists.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
    }
  },
  methods: {
    /** 查询数据列表 */
    getList() {
      this.loading = true;
      listAssets(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
        this.assetsList = response.rows; //后台数据集合
        this.lists = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
};