element-ui2表格排序如何排除某行不排序问题

发布于 2022-09-11 17:28:39 字数 1561 浏览 9 评论 0

clipboard.png
假如一个表格样子大概如上图,小计,合计是自己算出来的。标题1,标题2可以点击进行排序,但是排序要保持小计,合计位置不变
我试过了几种方法

  1. tableData push了小计和合计,但是这种点排序会把小计和总计一起排序
<el-table
        :data="tableData"
  1. 使用summary-method,但是这个貌似只能添加一个数组而已,不能把小计和总计一起添加进行。这种方法点击排序不会把小计和总计一起排序
<el-table
        show-summary
        :summary-method="summaryMethod"
        :data="tableData"
  1. tableData push了小计和合计, 在点击的时候把小计和总计splice掉,然后在push进去,但是还是会把他们进行排序
<el-table
        :data="tableData"
        border
        @sort-change="handleSortChange"
        
 handleSortChange (val) {
      setTimeout(() => {
        let l = this.tableData.findIndex(items => items.regType === '小计')
        let c = this.tableData.findIndex(items => items.regType === '总计')
        let lobj = {}
        let cobj = {}
        if (l > -1) {
          lobj = {...this.tableData[l]}
          this.tableData.splice(l, 1)
        }
        if (c > -1) {
          cobj = {...this.tableData[c]}
          this.tableData.splice(c, 1)
        }
        if (Object.keys(lobj).length > 0) {
          this.tableData.push(lobj)
        }
        if (Object.keys(cobj).length > 0) {
          this.tableData.push(cobj)
        }
      }, 0)
    },
  1. :sort-method="sortMethod" 估计还是这样
  2. 使用slot="append", ,但是添加上去的不是添加在table tbody后面,至少2.X不可以。 1.X确实可以保持与表格一致的,且可以点击排序但不包含小计和总计

请教各位有没有其他方法呢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

○愚か者の日 2022-09-18 17:28:39

sortable设置为'custom'

监听 Table 的 sort-change 事件,根据事件的参数来对tableData进行排序就行了

custom不会调用el-table本身的排序方法

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文