- <template>
- <el-tree draggable :allow-drop="dropAllow" @node-drop="dragSuccess" ref="tree" :data="dataList"
- :props="defaultProps" default-expand-all node-key="id" highlight-current></el-tree>
-
- </template>
- <script>
- export default {
- data() {
- return {
- dataList: [{
- id: 1,
- label: "一级菜单",
- children: [{
- id: 5,
- label: "1-1",
- }, ],
- },
- {
- id: 2,
- label: "二级菜单",
- children: [{
- id: 6,
- label: "2-1",
- },
- {
- id: 7,
- label: "2-2",
- },
- ],
- },
- {
- id: 3,
- label: "三级菜单",
- children: [{
- id: 8,
- label: "3-1",
- },
- {
- id: 9,
- label: "3-2",
- },
- ],
- },
- {
- id: 4,
- label: "四级菜单",
- },
- ],
- defaultProps: {
- label: "label", //指定节点标签为节点对象的某个属性值
- children: "children", //指定子树为节点对象的某个属性值
- },
- };
- },
- methods: {
- dropAllow(draggingNode, dropNode, type) {
- if (draggingNode.level === dropNode.level) { //同级
- if (draggingNode.parent.id === dropNode.parent.id) {
- // 向上拖拽 || 向下拖拽
- return type === "prev" || type === "next"
- }
- } else { //不同级
- if (draggingNode.level != 1) { //不是第一级
- return type === "inner" //插入
- } else {
- return false;
- }
- }
- },
- dragSuccess(draggingNode, dropNode, type, event) {
- console.log(draggingNode, dropNode, type, event);
- },
- }
- };
- </script>