element-plus table 表格前端输入框筛选

对于 element-plus 的 table 表格，你可以使用前端输入框来实现筛选功能。下面是一个简单的示例代码：

<template>
  <div>
    <el-input v-model="filterKey" placeholder="请输入关键字"></el-input>
    <el-table :data="tableData" :v-loading="loading">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterKey: '',
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      loading: false
    };
  },
  computed: {
    filteredData() {
      if (this.filterKey) {
        return this.tableData.filter(item => {
          return item.name.includes(this.filterKey);
        });
      } else {
        return this.tableData;
      }
    }
  }
};
</script>

在上面的代码中，我们使用了 `el-input` 组件来接受用户输入的关键字，并使用 `v-model` 指令将输入值与 `filterKey` 变量进行双向绑定。然后，我们通过计算属性 `filteredData` 来根据筛选条件过滤表格数据。最后，我们将过滤后的数据作为 `data` 属性传递给 `el-table` 组件进行展示。

这只是一个简单的示例，你可以根据实际需求进行更复杂的筛选操作。希望对你有所帮助！