在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ element ui table 怎么實時搜索input的內(nèi)容

element ui table 怎么實時搜索input的內(nèi)容

最近開發(fā)項目 用了element 組件
在table組件的實時搜索上卡殼了,官方例子 都是需要按鈕觸發(fā),還需要再 table內(nèi)過濾.
怎么在 table外的 input搜索框?qū)崟r搜索table內(nèi)容
求大神 指導

回答
編輯回答
入她眼

你是想對本地數(shù)據(jù)進行table的搜索過濾嗎？

前段時間針對 Element UI 的 form 和 table 組建進行了封裝，你可以看看能不能滿足你的需要。

el-search-table-pagination

2017年4月14日 14:28
編輯回答
風畔
<template>
  <div class="table">
    <div class="search-Box">
      <el-input   placeholder="請輸入關(guān)鍵字" icon="search"  class="search"  v-model="search"></el-input>
    </div>
    <el-table  :data="tables" border style="width: 100%">
      <el-table-column  prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column   prop="address"  label="地址"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        search: '',  //搜索
        tableData: [
          { date: '2016-05-02',name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' },
          {date: '2016-05-04',name: '章小虎',address: '上海市普陀區(qū)金沙江路 1517 弄'},
          {date: '2016-05-01',name: '李小虎',address: '上海市普陀區(qū)金沙江路 1519 弄'},
        ]  //表格內(nèi)容
      }
    },
    computed:{
      tables:function(){
        var search=this.search;
        if(search){
          return  this.tableData.filter(function(dataNews){
            return Object.keys(dataNews).some(function(key){
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    }
  }
</script>
2018年5月21日 16:25