前端table表全文搜索

最新推荐文章于 2024-08-22 16:29:55 发布

幻淘

最新推荐文章于 2024-08-22 16:29:55 发布

阅读量310

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/taoyiw/article/details/115246100

版权

需求描述

经常会遇到需求，前端分页＋全文搜索。

<el-input v-medel="value" placeholder="请输入关键字进行搜索" prefix-icon="el-icon-search">

<el-table :data="list.slice((page-1)*pageSize,page*pageSize)">
....
</table>
<el-pagination :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
       :current-page.sync="page"
      :page-sizes="[5,10,20,50,100]"
      :page-size="pageSize
      layout="total, prev, pager, next"></el-pagination>

data(){
	return{
		total:0,
		pageSize:10,
		page:1,
		dataList:[],
		value:''
	}
},
computed:{
	list(){
	const value=this.value
	if(value){
		this.page=1;
		return this.dataList.filter(function(data){
			return Object.keys(data).some(function(key){
				return String(data[key]).indexOf(value)>-1
			})
		})
	}
	return this.dataList;
	}
},
watch:{
	list(data){
		this.total=data.length
	}
},
methods:{
	handleCurrentChange(val){
		this.page=val
	},
	handleSizeChange(val){
		this.pageSize=val
	},
	getList(){
	...
	this.dataList=res...
	this.total=this.dataList.length
	},
}