element-ui table 多列组合排序

element-ui table 多列组合排序

element-ui table 配合后端实现多列组合排序。
思路:
1.监听sort-change事件,在该事件中缓存和修正当前的排序规则。并根据保存的排序规则调接口刷新表格数据。
2.监听header-cell-class-name事件,在该事件中修正表头排序图标的样式。保证图标的样式逻辑和缓存的排序规则一致。

<el-table stripe
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-cell-class-name="handleHeadAddClass"
      @sort-change='handleSortChange'
    >
	<el-table-column label="参数值"  align="center" sortable='custom' prop="paramValue"/>
	<el-table-column label="排序" align="center" sortable='custom' prop="orderId"/>
</el-table>
data(){
	return {
		sortField: {},
	}
}
--------------------------------------
handleSortChange({order, prop}){
    //触发的排序和缓存的排序相同时,取消该字段的排序
	if(!order || this.sortField[prop] === order){
	 	this.sortField[prop] = null;
	}else{
	 	this.sortField[prop] = order;
	}
	console.log(this.sortField)
	// 在 handleFilter 中传入 this.sortField的值调接口刷新表格中的值
	this.handleFilter();
},
handleHeadAddClass({column}){
	if(this.sortField[column.property]){
		column.order = this.sortField[column.property];
	}
},
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在实际开发中,经常需要对表格的数据进行筛选和排序。如果表格的数据太多,可能会导致页面加载缓慢,影响用户体验。因此,我们可以通过隐藏一些不必要的列来优化页面性能。 在element-ui的表格组件中,我们可以通过设置column的属性“visible”来控制列的显示和隐藏。对于需要隐藏的列,我们只需要将其对应的column的visible属性设置为false即可,元素将不会被渲染出来,从而达到了隐藏的效果。具体实现步骤如下: 1.在表头中定义需要隐藏的列的column,例如name列: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格数据中去掉对应的name字段 ``` [{ age: 28, sex: '男' }, { age: 25, sex: '女' }] ``` 这样,在页面中,name列就不会被渲染出来。 另外,在实际开发中,有时候需要在特定的情况下显示隐藏的列,这时我们可以使用表格的scoped slot来实现。具体实现步骤如下: 1.在表头中定义需要隐藏的列的column,例如name列: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格组件中定义一个scoped slot,以slot-scope="{ column, $index }"来获取当前列和当前行的索引值,然后根据需要显示隐藏列 ``` <el-table :data="tableData" style="width: 100%"> <template slot-scope="{ column, $index }"> <el-table-column v-if="column.label == '姓名'" prop="name" label="姓名" :key="$index" :visible="true"> </el-table-column> <el-table-column v-else :prop="column.prop" :label="column.label" :key="$index" :visible="column.visible"> </el-table-column> </template> </el-table> ``` 这样,在页面中,我们就可以通过控制visible属性来动态显示和隐藏列了。 总的来说,element-ui的表格组件非常灵活且功能强大,通过控制column的visible属性,可以轻松实现表格列的隐藏。同时,通过使用scoped slot,还可以实现动态显示和隐藏列,方便开发者按需加载表格数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值