[JavaScript知识库]vue + elementUi + tree只能同级拖拽排序（用于权限管控）

项目中遇到权限问题时，相信很多公司都会考虑使用树（tree）结构来实现。下面是本人实现该功能的具体代码！！！

子组件

<template>
	<el-tree
	:data="treeData"
	style="height: 300px;"
	node-key="id"
	show-checkbox
	:default-expand-all='expand'
	@node-drop="handleDrop"
	draggable
	:allow-drop="allowDrop">
		<div class="custom-tree-node" slot-scope="{ node, data }">
			<span>{{node.label}}</span>
			<span style="width: 300px; padding-left: 10px;">
				<el-checkbox @click.stop.native v-model="node.list">备选项1</el-checkbox>
				<el-checkbox @click.stop.native v-model="node.list1">备选项2</el-checkbox>
			</span>
		</div>
	</el-tree> 
</template>
<script>
	export default {
    name:'treeList',
    props:{
    	treeData:{
    		type:Array,
    		default:[]
    	},
    	expand:{
    		type:Boolean,
    		default:true
    	}
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
 methods: {
      handleDrop(draggingNode, dropNode, dropType, ev) {
        let obj = {
	        aboveId:'',
	        arr:[]
	      }
	      obj.aboveId = dropNode.data.aboveId
	      for (let item of dropNode.parent.childNodes) {
	        obj.arr.push(item.data.id)
	      }
      },
      allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.data.level === dropNode.data.level) {
	        //fatherId 是父节点id
	        if (draggingNode.data.fatherId === dropNode.data.fatherId) {
	          return type === 'prev' || type === 'next'
	        }else{
	        	return false;
	        }
	      } else {
	        // 不同级进行处理
	        return false;
	      }
      }
    }
  }
</script>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

父组件

<treeList 
      	:treeData='treeData' 
      	:expand='isExpand'>
</treeList>
<script>
export default{
	data() {
        return {
       	isExpand:false,
        treeData:[{
          id: 1,
          list:'',
          list1:'',
          label: '一级 1',
          children: [{
          	fatherId:1,
            id: 4,
            list:'',
            list1:'',
            label: '二级 1-1',
            children: [{
            	fatherId:4,
              	id: 9,
              	list:'',
              	list1:'',
              	label: '三级 1-1-1'
            }]
          }]
        }]
     }
}
</script>

就不多啰嗦了，看代码！