【el-table在表格外的input输入框输入内容实时查询出表格相应数据】

最新推荐文章于 2024-08-20 17:51:25 发布

心晴*-*

最新推荐文章于 2024-08-20 17:51:25 发布

阅读量1.8k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50004969/article/details/121696550

版权

@el-table在表格外的input输入框输入内容实时查询出表格相应数据

项目场景：

最近遇到一个需求，需要在查询框输入内容时实时查询出表格数据

具体实现方法：

<template>
  <div class="table">
    <div style="margin-top:10px">
        <el-form label-width='120px'>
                <el-row :gutter="20">
                    <el-col :xs='24' :sm='12' :md='12' :lg='8'>
                        <el-form-item label='名字'> 
                            <el-input   placeholder="请输入关键字" icon="search"  class="search"  v-model="names" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs='24' :sm='12' :md='12' :lg='8'>
                        <el-form-item label='地址'> 
                            <el-input   placeholder="请输入关键字" icon="search"  class="search"  v-model="address" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
    </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 {
        names: '',  
        address:'',
        tableData: [
          {date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1617 弄'},
          {date: '2016-05-01',name: '李小虎',address: '上海市普陀区金沙江路 1519 弄'},
          {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 1537 弄'},
          {date: '2016-05-01',name: '李虎',address: '上海市普陀区金沙江路 1519 弄'},
        ]  //表格数据
      }
    },
    computed:{
    tables:function(){
        var names=this.names;
        var address=this.address;
        if(address||names){
            return  this.tableData.filter(item=>{
                return String(item.name).toLowerCase().indexOf(names) > -1 && String(item.address).toLowerCase().indexOf(address) > -1 
            })
        }
        return this.tableData
      }
    }
  }
</script>