element-ui Table组件多列同时排序

本文介绍了如何在Element-UI的Table组件中实现多列排序功能,特别是针对产品名称相同情况下,按产品规格*分隔的第一个数值进行排序的需求。通过监听sort-change事件,设置sort-method和sort-method排序方法,结合后端获取的原始数据进行动态排序处理,确保数据按预期展示。
摘要由CSDN通过智能技术生成

需求:将产品名称相同的排在一起的同时,再按产品规格*分隔的第一个数值排序

实现效果

排序前:

排序后:

实现的核心操作:

1.为table绑定sort-change事件,并为产品规格列指定sort-method的排序方法

<el-table
      ref="productTable"
      :data="productTableData"
      :border="true"
      :highlight-current-row="true"
      v-loading="productTableLoading"
      @sort-change="sortChange"
      @selection-change="(selection)=>{selectList=selection}"
      @row-click="row=>{$refs.p
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值