原文地址
利用element table的【树形数据】实现的排序，分为两级，第一级是进行城市的排序，第二级是对城市里的项目进行排序，处在第一个和最后一个的元素需要分别设置不可向上和向下操作。
需要注意数据的格式，element文档中【树形数据】的tableData和children里的格式需要保持一致，区别是children里不需要children，同时不要存在hasChildren字段，会导致树形数据不能加载，具体数据格式查看Element-table。
前端vue代码：
border :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
前端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
},