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()转小写方法
重置如果需要的话可以根据自己的列表内容进行设置
