element ui表格data搜索重置功能

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
  }) */
},