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

xun-ming

于 2024-11-19 18:05:05 发布

阅读量1.3k

点赞数 8

文章标签： elementui vue.js 前端搜索 include

本文为博主（xunming）原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/diyangxia/article/details/143891567

版权

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%">

来看成品动图，很简单，在线运行代码网站
在这里插入图片描述