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

【Vue】element-ui2表格排序如何排除某行不排序问题
假如一个表格样子大概如上图，小计，合计是自己算出来的。标题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确实可以保持与表格一致的，且可以点击排序但不包含小计和总计

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

回答

sortable设置为'custom'

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

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

以上是 【Vue】element-ui2表格排序如何排除某行不排序问题 的全部内容， 来源链接： utcz.com/a/77967.html

回到顶部