vue + element 实现 filter对表格数据进行过滤

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数据
    }
  },

6. 效果如下

• 搜索前
  
• 输入搜索关键字
  
• 点击搜索按钮后
  
• 取消搜索关键字

• 在无搜索关键字时，点击搜索按钮后
  
  就这样就实现前端 Vue 搜索框 动态过滤表格数据了，如果想是实现表格数据过滤在搜索框输入值时就动态过滤，可以查看我另一篇文章vue el-tree 组件过滤树数据