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

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

-------->

<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()转小写方法

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