单层级el-tree仿el-table实现拖拽排序

项目需求：

实现如下表格，并能够对版本进行拖拽排序

 实现方法：

在网上查了不少方法，关于table实现拖拽排序，网上给出的方法都是下载插件使用插件实现，但我这就一小小功能需求，为此扩展一个插件显然不太方便，于是我想到了el-tree有自带的拖拽排序功能：

            

                

                    
版本名称
                    
操作
                
                
                    

                        

                            
{{ node.label }}
                            

                                删除
                            
                        
                    
                
            
            
                取消
                保存
            
        

data:

editionsData: [
  {version_name:"版本A"},
  {version_name:"版本B"},
  {version_name:"版本C"},
  {version_name:"版本D"},
],
defaultProps: {
    children: 'children',
    label: 'version_name'
},

methods:

// 拖拽排序
handleDrop(draggingNode, dropNode, type) {
    if (draggingNode.level == 1 && dropNode.level == 1 && type != 'inner') {
                return true;
    } else {
       return false
    }
},
//保存排序
confirmSetEditionSort() {
    let data = [];
    this.editionsData.forEach((item, index) => {
         let obj = {
               version_name: item.version_name,
               sort: index + 1,
          }
          data.push(obj)
     })
     console.log(data)//此时data便是排序后数据
},

scss:

/deep/.filter-tree1 .el-tree-node__content {
    width: 100%;
    padding: 25px 0;
    font-size: 16px;
    border-bottom: 0.3px solid #EBEEF5;
}