vue element-ui 查询功能（前端）

vue element-ui 查询

1. 结构
<el-col :span="3" class="grid">
	<el-input v-model="input" placeholder="请输入查询内容" size="mini"></el-input>
</el-col>
<el-table :data="tables" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
		....
</el-table>

2. data中定义 "input"，查询内容
<script>
  export default {
   data() {
       return {
          tableData:[], //数据表格里的数据后台请求过来生成
          input:''  //查询输入框内容
        }
     } 
     methods：{}，
     computed：{
         tables() { //在你的数据表格中定义tabels
		   const input = this.input
			 if (input) {
				// console.log("input输入的搜索内容：" + this.input)
				return this.tableData.filter(data => {
					console.log("object:" + Object.keys(data))
					return Object.keys(data).some(key => {
						return String(data[key]).toLowerCase().indexOf(input) > -1
					})
				})
			}
			return this.tableData
		}
   
     }
  }
</script>
        computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，
    然后就可 以在页面上进行双向数据绑定展示出结果或者用作其他处理；

结果