1.首先定义 一个搜索框
<el-input class="childTable-input" v-model="queryKeyCode" :placeholder="$t('refersetting.Options')" clearable maxlength="2000" />
2.在 data中 声明 v-model 绑定的全局变量
data() {
return {
btnKeyCode: '', // 中转搜索框(右侧子表)的值 (我的需求是要在点击 搜索按钮后才进行过滤)
queryKeyCode: '', // 搜索框(右侧子表)的值
}
},
3.定义 watch 实现 queryKeyCode和搜索框的双向绑定
watch: {
queryKeyCode(val) {
this.queryKeyCode = val
}
},
4. 将实时更新的queryKeyCode的值 赋给 btnKeyCode变量 绑在按钮上
<el-button class="childTable-queryBtn" type="primary" icon="el-icon-search" :disabled="!useButton" @click="btnKeyCode = queryKeyCode">搜索</el-button>
5.计算数组,监听el-table的data
// 这是 el-table
<el-table :data="table" border highlight-current-row max-height="560" v-loading="TableLoading">
...
</el-table>
// 计算el-table的data,将btnKeyCode变量作为过滤器条件,来返回数据
computed: {
// 模糊搜索右侧子表名称筛选
table() {
const search = this.btnKeyCode.trim()
if (search) {
return this.childData.filter(data => {
return data.eva_item_display.indexOf(search) > -1
})
}
return this.childData // chilData 就是之前el-table 的 data数据
}
},
- 效果如下
- 搜索前
- 输入搜索关键字
- 点击搜索按钮后
- 取消搜索关键字
- 在无搜索关键字时,点击搜索按钮后
就这样就实现前端 Vue 搜索框 动态过滤表格数据了,如果想是实现表格数据过滤在搜索框输入值时就动态过滤,可以查看我另一篇文章vue el-tree 组件过滤树数据