element-plus 表格信息动态筛选

您可以使用 element-plus 表格组件的筛选功能，它支持自定义筛选方法。您可以在表格组件上添加一个筛选栏，通过监听筛选栏中的输入，动态地更新表格数据。

以下是一个使用 element-plus 表格组件的示例代码，演示如何动态筛选表格信息：

<template>
  <div>
    <el-input v-model="filterKey" placeholder="请输入关键字"></el-input>
    <el-table :data="filteredData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterKey: '',
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => {
        return item.name.toLowerCase().includes(this.filterKey.toLowerCase())
      })
    }
  }
}
</script>

在上面的代码中，我们使用了一个输入框来获取用户输入的关键字，并通过 computed 属性实时计算出筛选后的表格数据。在 computed 属性中，我们使用了 Array.prototype.filter() 方法对表格数据进行筛选，筛选方法是判断每一行数据的姓名是否包含关键字。

您可以根据实际需要修改筛选方法，例如可以同时匹配多个字段，或者使用模糊匹配等。