element ui表格搜索重置功能
本地
1.html
<el-input v-model.trim="inputname"></el-input>
<el-input v-model.trim="inputid"></el-input>
<button @click="getsearch">搜索<button/>
<button @click="getreset">重置<button/>
<el-table
:data="tabledata " //你的数据
v-loading="loading" //重置出现loading加载
>
...
2.data
data(){
return{
tabledata:[{name:1,id:1},{name:2,id:2}], //你的数据
tabledata2:[], //空数据,后面会把筛选的数据加进去
loading: false,//重置出现loading加载
}
}
3.methods
getsearch () {
this.tabledata2= this.tabledata.filter(item => {//把筛选的数据放进空的tabledata2数组
if (item.name.includes(this.inputname) && item.id.includes(this.inputid)) {//tabledata包含输入的信息时返回该条包含的数据
return item
}
})
this.tabledata= this.tabledata2//更改tabledata渲染el-table
},
getreset () { //刷新
this.inputname = ''//清空输入的关键字
this.inputid = ''//清空输入的关键字
this.loading = true;//出现加载页面
setTimeout(() => {
this.loading = false;//关闭加载页面
this.tabledata = this.$options.data().tabledata;//重置tabledata($options成原始数据)
}, 500);//加载时间
},
调接口
1.html
<el-input v-model.trim="inputname"></el-input>
<el-input v-model.trim="inputid"></el-input>
<button @click="getsearch">搜索<button/>
<button @click="getreset">重置<button/>
<el-table
:data="tabledata " //请求的数据
v-loading="loading" //重置出现loading加载
>
...
2.data
data(){
return{
tabledata:[], //请求的数据
loading: false,//重置出现loading加载
search:{
searchName:"",
searchId:""
}
}
}
3.methods
getsearch () {
this.search.searchName = inputname
this.search.searchId= inputid
this.loading = true
//要根据接口方法传参,调查询列表方法
search(this.search).then((res)=>{
this.tabledata = res.rows
this.loading = false
})
//调你的接口,查询列表方法
},
getreset () {
this.inputname = ''//清空输入的关键字
this.inputid = ''//清空输入的关键字
this.loading = true;//出现加载页面
this.getsearch()
//如果传空,不能搜到全部就重新调接口,不传参,要看后端接口方法
/* search(this.search).then((res)=>{
this.tabledata = res.rows
this.loading = false
}) */
},