el-table表格筛选功能实现

通过 input 输入框来筛选 el-table 表格中的数据。当用户在输入框中输入内容时，表格应该只显示与输入内容匹配的行。

步骤1
在 el-table 表格上面添加一个 el-input 输入框，并绑定一个变量，用于存储用户输入的内容。例如：searchText。同时，为输入框添加一个 placeholder 属性，以提示用户输入的内容。例如：请输入内容。

使用 v-model 指令将输入框的值与 searchText 变量进行双向绑定。这样，当用户在输入框中输入内容时，searchText 变量的值也会随之更新。同时，当 searchText 变量的值发生变化时，输入框中的内容也会更新。

步骤2
监听 searchText 变量的变化，当 searchText 变量的值发生变化时，更新表格中的数据。可以使用 watch 函数来监听 searchText 变量的变化。在 watch 函数中，根据 searchText 变量的值，筛选出与输入内容匹配的行，并将这些行更新到表格中。例如：tableData。同时，将筛选后的数据重新赋值给 tableData 变量。这样，表格就会只显示与输入内容匹配的行。

代码示例

vue

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入内容"></el-input>
    <el-table :data="filteredData" border>
      <el-table-column prop="name" label="姓名" sortable></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址" sortable></el-table-column>
    </el-table>
  </div>
</template>

<script>
    import { reactive, toRefs } from "vue"

    export default {
        name: "table",
        setup() {
            const data = reactive({
                searchText: "", // 搜索文本框的值
                tableData: [],  // 筛选后的表格数据，用于渲染表格的值存储在这里
                alltableData: [], // 表格数据，假设从后端获取的数据存储在这里
            })

            // 监听搜索文本框的值变化，当用户输入时，更新表格数据
            watch(() => data.searchText, (newVal) => {
                data.tableData = data.alltableData.filter((item) => {
                    return item.name.includes(newVal) || item.address.includes(newVal) || item.age.includes(newVal) // 根据需要修改筛选条件，这里假设姓名、地址和年龄都可以作为筛选条件
                })
            })

            const getTableData = () => {
                data.alltableData = [ // 假设从后端获取的数据存储在这里，这里用一个数组模拟
                    { name: "张三", age: 20, address: "北京" },
                    { name: "李四", age: 25, address: "上海" },
                    { name: "王五", age: 30, address: "广州" },
                    { name: "赵六", age: 35, address: "深圳" },
                ]
                data.tableData = data.alltableData // 初始化表格数据为全部数据，以便在用户没有输入时显示所有行
            }

            onMounted(() => {
				getTableData()
			})

            return {
                ...toRefs(data)
            }
        }
    };
</script>

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入内容"></el-input>
    <el-table :data="filteredData" border>
      <el-table-column prop="name" label="姓名" sortable></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址" sortable></el-table-column>
    </el-table>
  </div>
</template>

<script>
    import { reactive, toRefs } from "vue"

    export default {
        name: "table",
        setup() {
            const data = reactive({
                searchText: "", // 搜索文本框的值
                tableData: [],  // 筛选后的表格数据，用于渲染表格的值存储在这里
                alltableData: [], // 表格数据，假设从后端获取的数据存储在这里
            })

            // 监听搜索文本框的值变化，当用户输入时，更新表格数据
            watch(() => data.searchText, (newVal) => {
                data.tableData = data.alltableData.filter((item) => {
                    return item.name.includes(newVal) || item.address.includes(newVal) || item.age.includes(newVal) // 根据需要修改筛选条件，这里假设姓名、地址和年龄都可以作为筛选条件
                })
            })

            const getTableData = () => {
                data.alltableData = [ // 假设从后端获取的数据存储在这里，这里用一个数组模拟
                    { name: "张三", age: 20, address: "北京" },
                    { name: "李四", age: 25, address: "上海" },
                    { name: "王五", age: 30, address: "广州" },
                    { name: "赵六", age: 35, address: "深圳" },
                ]
                data.tableData = data.alltableData // 初始化表格数据为全部数据，以便在用户没有输入时显示所有行
            }

            onMounted(() => {
				getTableData()
			})

            return {
                ...toRefs(data)
            }
        }
    };
</script>

el-table表格筛选功能实现 ​

el-table表格筛选功能实现