vue + elementUi + tree只能同级拖拽排序（用于权限管控）

谁借莪１个温暖的怀抱￠ 2023-01-23 06:49 6阅读 0赞

项目中遇到权限问题时，相信很多公司都会考虑使用树（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>

就不多啰嗦了，看代码！