vue+element在el-table表头添加搜索框实现模糊查询

momo_via

已于 2024-01-08 15:39:26 修改

阅读量4.9k

点赞数

分类专栏：小Tips 文章标签： vue.js elementui javascript

于 2022-11-22 14:11:15 首次发布

本文链接：https://blog.csdn.net/momohhhhh/article/details/127981472

版权

小Tips 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

页面初始展示实现模糊查询

-------->

<el-input
          placeholder="请输入名称并按回车查询"
          v-model="search"
          class="input-with-select"
          @keyup.enter.native="handleQuery"
        >
<el-button
            slot="append"
            icon="el-icon-refresh"
            @click="resetQuery"
          ></el-button>
        </el-input>

el-table可以写在input下方即可

要注意search要先定义再使用，data（）中定义即可

 search: '',

接下来是筛选方法：

handleQuery() {
      const tableData = this.tableList
      this.tableList = tableData.filter(
        (data) =>
          !this.search || data.name.toLowerCase().includes(this.search.toLowerCase())
      )
    },

注：

渲染数据.filter(data => !检索关键字||data.model_type_name.toLowerCase().includes(检索关键字.toLowerCase()))

当检索关键字不是字母时，可以去除 toLowerCase()转小写方法

重置如果需要的话可以根据自己的列表内容进行设置