同一表格根据不同排序条件查询

最新推荐文章于 2024-07-18 00:52:04 发布

AI前端高级工程师

最新推荐文章于 2024-07-18 00:52:04 发布

阅读量982

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 vue功能实现案例文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43837268/article/details/88605862

web前端同时被 2 个专栏收录

419 篇文章

订阅专栏

vue功能实现案例

26 篇文章

订阅专栏

本文介绍如何使用Element UI的表格组件实现数据排序，并通过调用后端接口动态加载排序后的数据。具体包括设置表格列属性、监听排序变化、发送HTTP请求获取排序数据等关键步骤。

1.template

<el-table ref="multipleTable" 
			  	:data="tableData" 
			  	tooltip-effect="dark" 
			  	@selection-change="handleSelectionChange"
			  	@sort-change='handleSortChange'
			  	:clearSort='clearSort()'>
      			
				 	<el-table-column
				      	v-for='(item,index) in tableList'
				        :prop="item.prop"
				        :label="item.label"
				        :width="item.width"
				        :key='index'
				        >
			        </el-table-column>

					<el-table-column  label="产品价格(元/g)" sortable ref="sortOne" width="133">
						<template slot-scope="scope">						        
					       {{ scope.row.PRICE}}
      					</template>
					</el-table-column>
					<el-table-column label="产品规格(g)"  sortable  ref="sortTwo" width="130">
							<template slot-scope="scope">						        
						       {{ scope.row.WEIGHT}}
	      					</template>
						</el-table-column>
</el-table>

2.method

handleSortChange(val){
	      			      		console.log(val)
	      		if(val.column==null){
	      			this.Sort('','',this.pageNo)
	      			return
	      		}
	      		if(val.column.label=='产品价格(元/g)'&&val.order=='descending'){
	      			this.Sort('PRICE',"desc",this.pageNo)
	      			this.productType='PRICE';
	      			this.sortOrder="desc";
	      		}
	      		if(val.column.label=='产品价格(元/g)'&&val.order=='ascending'){
	      			this.Sort('PRICE',"asc",this.pageNo)
	      			this.productType='PRICE';
	      			this.sortOrder="asc";
	      		}
	      		if(val.column.label=='产品规格(g)'&&val.order=='descending'){
	      	
	      			this.Sort('WEIGHT',"desc",this.pageNo)
	      			this.productType='WEIGHT';
	      			this.sortOrder="desc";
	      		}
	      		if(val.column.label=='产品规格(g)'&&val.order=="ascending"){
	      			this.Sort('WEIGHT',"asc",this.pageNo)
	      			this.productType='WEIGHT';
	      			this.sortOrder="asc";
	      		}
	      		console.log(val,'val>>>>>>>>>>>>>>')
	      	},

Sort(x,y,pageNO,pageSize){
	      		console.log(x,y,pageNO,pageSize)
	      		this.keepX=x
				  this.keepY=y
				  console.log(this.material)
				let parames = {
					"functionName": "preciousmetalbiz.service.PrdMetalService",
				    "methodName": "selectPmList",
				    "pageNo":pageNO,
				    "pageSize":10,
					
					"data": { // 查询条件
						prdCode: this.prdCode,						// 产品代码
						prdName: this.prdName,						// 产品名称
						weightStart: this.weightStart,		// 规格（开始）
						weightEnd: this.weightEnd,			// 规格（结束）
						priceStart: this.priceStart,	// 产品销售价格（开始）
						priceEnd: this.priceEnd,		// 产品销售价格（结束）
						material: this.material,				// 材质	
						companyName: this.companyName, 	
						branchCode:JSON.parse(sessionStorage.getItem('sessionData')).orgnCode,
	   					roleId:JSON.parse(sessionStorage.getItem('sessionData')).roleId,
						"order":x,
	        			"sort":y	
					}
				};
				this.http(JSON.stringify(parames))
				.then((res)=>{
					  if(res.data.errorCode!=undefined){
					this.$alert(res.data.errorMsg,'提示', {
					confirmButtonText: '确定',
					})
			    	}
						var list = res.data.basicInfoList;
						this.tableData = list;
						this.total = res.sumCount;
						
						setTimeout(()=>{
//                  this.setSelectRow();
					
                    }, 50)
				}).catch(error => {
					console.log(error);
				})
			},