利用element table的【树形数据】实现的排序，分为两级，第一级是进行城市的排序，第二级是对城市里的项目进行排序，处在第一个和最后一个的元素需要分别设置不可向上和向下操作。
需要注意数据的格式，element文档中【树形数据】的tableData和children里的格式需要保持一致，区别是children里不需要children，同时不要存在hasChildren字段，会导致树形数据不能加载，具体数据格式查看Element-table。
前端vue代码：
<el-table :data="hotProjectOrderInfoList" v-loading="dialogHotProjectOrderLoading" style="width: 100%;margin-bottom: 20px;" row-key="rowId"
border :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="项目" width="200"> </el-table-column>
<el-table-column prop="projectId" label="" v-if="false"> </el-table-column>
<el-table-column prop="projectOrderIndex" label="排序"> </el-table-column>
<el-table-column width="150">
<template slot-scope="scope">
<el-button v-show="!validateOperate(scope.row, 'up')" @click="handleHotProjectOrder(scope.row, 'up')" size="mini" icon="el-icon-top"></el-button>
<el-button v-show="!validateOperate(scope.row, 'down')" @click="handleHotProjectOrder(scope.row, 'down')" size="mini" icon="el-icon-bottom"></el-button>
</template>
</el-table-column>
</el-table>
前端JS代码：
//热门项目排序
handleHotProjectOrder(row, type) {
let currentProjectOrderIndex = row.projectOrderIndex
if (row.children && row.children.length != 0) {//有children 则 排城市
this.hotProjectOrderInfoList.forEach( item => {
if (type == 'up') {
if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {
item.projectOrderIndex = item.projectOrderIndex + 1
} else if (item.projectOrderIndex == currentProjectOrderIndex) {
item.projectOrderIndex = currentProjectOrderIndex - 1
}
} else if (type == 'down') {
if( item.projectOrderIndex == currentProjectOrderIndex ) {
item.projectOrderIndex = currentProjectOrderIndex + 1
} else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {
item.projectOrderIndex = currentProjectOrderIndex
}
}
})
this.hotProjectOrderInfoList.sort(this.projectOrderIndexCompare);
return;
}
//没有children 则 排项目
this.hotProjectOrderInfoList.forEach(item1 => {
if (row.cityCode == item1.cityCode) {//
item1.children.forEach( item => {
if (type == 'up') {
if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {
item.projectOrderIndex = item.projectOrderIndex + 1
} else if (item.projectOrderIndex == currentProjectOrderIndex) {
item.projectOrderIndex = currentProjectOrderIndex - 1
item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据
return
}
} else if (type == 'down') {
if( item.projectOrderIndex == currentProjectOrderIndex ) {
item.projectOrderIndex = currentProjectOrderIndex + 1
} else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {
item.projectOrderIndex = currentProjectOrderIndex
item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据
return
}
}
})
}
})
},
//用于判断热门项目排序的操作按钮是否可用
validateOperate(row, type) {
let that = this
if (row.children && row.children.length != 0) {//有children
if (type == 'up' && row.projectOrderIndex == 1) {
return true;
} else if (type == 'down' && row.projectOrderIndex == this.hotProjectOrderInfoList.length) {
return true;
} else {
return false;
}
} else {
if (type == 'up' && row.projectOrderIndex == 1) {
return true;
} else if (type == 'down') {//这里需要找children的length
return that.getHotProjectCityChildrenLength(row.cityCode, row.projectOrderIndex);
} else {
return false;
}
}
},
//获取某个城市项目的数据 热门项目排序时用到
getHotProjectCityChildrenLength(cityCode, projectOrderIndex) {
let result = false;
this.hotProjectOrderInfoList.forEach(item => {
if (item.cityCode == cityCode) {
result = item.children.length == projectOrderIndex;
}
})
return result
},
