@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>

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

HTML中限制input 输入框输入内容
HTML中限制input 输入框输入内容先介绍使用 oninput 事件,限制HTML中input 输入框输入内容的方式,再介绍用其它方式限制HTML中input 输入框输入内容. 只能输入纯数字的 ...
html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
html输入框禁止输入汉字,input输入框输入中文时，监听的input事件怎样屏蔽拼音状态...
在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就会不断发送请求,用户体验非常差劲. 针 ...
input 输入框输入中文
input 输入框输入中文问题描述在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就 ...
H5页面苹果手机点击输入框输入内容时页面自动放大
问题:H5页面苹果手机点击输入框输入内容时,页面会自动放大,导致用户体验不好解决:<meta name="viewport" content="width=dev ...
vue中实现百度地图的引用（根据输入框输入内容获取详细地址）
vue中实现百度地图的引用(根据输入框输入内容获取详细地址) 代码内容参考:https://www.cnblogs.com/shuaifing/p/8185311.html 最终实现效果第一步:在i ...
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
vue3 ant design vue项目实战--单选框(Radio)的使用以及Form表单的双向绑定知识调用(form表单的源代码附在文章最后) 场景复现实现需求 form表单整体架构的搭建 i ...
Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...
input框输入内容限制
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...

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

项目场景：

具体实现方法：

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

最新文章

热门文章