vue el-table指定某些数据不参与排序（部分行不参与排序）

1、以下案例是基于我之前TTable组件中使用

2、效果图

3、二种解决方案

第一种方案：（参考了这篇文章）

注意：设置sortable: ‘custom’，操作table @sort-change="soltHandle"事件
##关键代码

soltHandle (column) {
//不参与排序的数组
      let freeGood = []
      //参与排序的数组
      let elseFree = []
      //fieldName 为对应列的prop
      let fieldName = column.prop
      let sortingType = column.order
      //降序
      if (sortingType == "descending") {
        this.table.data.forEach(item => {
          //在整个tableData中找到不参与排序的所有数据
          if (!item.workOrderNo) {
            //不参与排序的所有数据加到数组中
            freeGood.push(item)
          }
          else {
            //参与排序的数据
            elseFree.push(item)
          }
        })
        this.table.data = elseFree.sort((a, b) => {
          // console.log(555, typeof a[fieldName])
          if (typeof a[fieldName] == 'string') {
            return b[fieldName].localeCompare(a[fieldName])
          } else if (typeof a[fieldName] == 'number') {
            return b[fieldName] - a[fieldName]
          }
        })
        this.table.data = [...this.table.data, ...freeGood]
      } else {
        this.table.data.forEach(item => {
          if (!item.workOrderNo) {
            freeGood.push(item)
          } else {
            elseFree.push(item)
          }
        })
        // this.table.data = elseFree.sort((a, b) => a[fieldName] - b[fieldName])
        this.table.data = elseFree.sort((a, b) => {
          // console.log(666, typeof a[fieldName])
          if (typeof a[fieldName] == 'string') {
            return a[fieldName].localeCompare(b[fieldName])
          } else if (typeof a[fieldName] == 'number') {
            return a[fieldName] - b[fieldName]
          }
        })
        this.table.data = [...this.table.data, ...freeGood]
      }
}

第二种方案（主要就是把不要的排序的行删除，排完序后在追加进去）

注意：设置sortable: ‘custom’，操作table @sort-change="soltHandle"事件

// 排序事件
    soltHandle (column) {
      // console.log('排序事件', column)
      let fieldName = column.prop
      let sortingType = column.order
      let tableData = this.table.data
      let avgData = {} // 当页合计一行数据
      tableData.map((item) => {
        if (!item.workOrderNo) {
          avgData = item
        }
      })
      if (sortingType == 'ascending') {
        // 删除table中当页合计一行数据
        tableData.forEach((item, index) => {
          if (!item.workOrderNo) {
            tableData.splice(index, 1)
          }
          return item
        })
        //正序
        tableData = tableData.sort((a, b) => {
          // console.log(555, typeof a[fieldName])
          if (typeof a[fieldName] == 'string') {
            return b[fieldName].localeCompare(a[fieldName])
          } else if (typeof a[fieldName] == 'number') {
            return b[fieldName] - a[fieldName]
          }
        })
        tableData.push(avgData)
      } else if (sortingType == 'descending') {
        tableData.map((item, index) => {
          if (!item.workOrderNo) {
            tableData.splice(index, 1)
          }
          return item
        })
        // 倒序
        tableData = tableData.sort((a, b) => {
          // console.log(666, typeof a[fieldName])
          if (typeof a[fieldName] == 'string') {
            return a[fieldName].localeCompare(b[fieldName])
          } else if (typeof a[fieldName] == 'number') {
            return a[fieldName] - b[fieldName]
          }
        })
        tableData.push(avgData)
      } else {
        this.$refs.productionRecordsTable.clearSort() // 清除排序
      }
    },

4、使用TTable组件如图设置：

5、源码地址

gitHub组件地址

gitee码云组件地址

---

相关文章

基于ElementUi&Antd再次封装基础组件文档