vue element-ui 查询功能(前端)
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删
·
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里面定义,
然后就可 以在页面上进行双向数据绑定展示出结果或者用作其他处理;
结果
更多推荐
已为社区贡献5条内容
所有评论(0)