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;
      });
    },
};