ElementUI之给el-table实现搜索功能

1，有一个表格

 <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

绑定了一些测试数据

tableData: [
        {
          date: "2026-05-02",
          name: "墨智",
          address: "天运星 1518 弄"
        },
        {
          date: "2099-05-04",
          name: "张虎",
          address: "赵国恒岳派 1517 弄"
        },
        {
          date: "3065-05-01",
          name: "王林",
          address: "赵国王家村 1519 弄"
        },
        {
          date: "3065-05-03",
          name: "李慕婉",
          address: "楚国云天宗 1516 弄"
        }
      ]

当前效果如下

2，如果此表格数据量过大，那么就需要一个搜索功能，首先在表格上方加一个输入框

<el-input v-model="searchQuery" placeholder="请输入项目名称" class="mb-20"></el-input>

顺便加一点样式

.mb-20 {
  margin-bottom: 10px;
  width: 300px;
}

3，js数据data里给输入框绑定数据

data() {
    return {
      searchQuery: '',
   }
}

4，js计算方法里添加过滤

computed: {
    filteredData() {
      const searchQuery = this.searchQuery.toLowerCase();
      if (searchQuery == undefined || searchQuery == "") {
        return this.tableData;
      }
      return this.tableData.filter((row) => {
        return row.name.includes(searchQuery);
      });
    }
  }

5，修改表格绑定的数据源

 <el-table
    :data="filteredData"
    border
    style="width: 100%">

来看成品动图，很简单，在线运行代码网站

原文地址：https://blog.csdn.net/diyangxia/article/details/143891567

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！