博客

elementui el-radio-group 分组排序问题

<!-- 分组排序 -->
    <el-radio-group v-model="sortType" class="group-button width-full mar-b-10" size="mini" @change="handleSortTypeChange">
      <el-radio-button :label="1">{{ $t('formula.orderExecution') }}</el-radio-button>
      <el-radio-button :label="0">{{ $t('formula.orderGroup') }}</el-radio-button>
    </el-radio-group>

data() {
    return {
      sortType: 1, // 公式显示顺序，1-按执行顺序，0-按分组
    }
  },

// 排序类型变化
    handleSortTypeChange() {
      this.treeData = this.getSortFormulaData(this.tableData)
    },

lodash 排序方法
.sortBy(collection, [iteratees=[.identity]])#
创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序，也就是说相同元素会保持原始排序。 iteratees 调用1个参数： (value)。
collection (Array|Object): 用来迭代的集合。
[iteratees=[_.identity]] (…(Array|Array[]|Function|Function[]|Object|Object[]|string|string[])): 这个函数决定排序。
(Array): 返回排序后的数组。

// 获取排序后的数据
    getSortFormulaData(list) {
      let ret
      if (this.sortType) {
        // 按执行顺序排序
        ret = sortFormula(list)
      } else {
        // 按组件排序
        ret = _.sortBy(list, ['pageWidgetCaption', 'id'])
      }
      return ret
    },