Browse Source

update: 功能优化

liuyang 2 years ago
parent
commit
6539611e74
1 changed files with 25 additions and 2 deletions
  1. 25 2
      src/views/_components/drag/DragComments.vue

+ 25 - 2
src/views/_components/drag/DragComments.vue

6
        <h5 class="title">属性树形结构</h5>
6
        <h5 class="title">属性树形结构</h5>
7
        <div class="tree-content">
7
        <div class="tree-content">
8
          <el-tree
8
          <el-tree
9
            ref="myTree"
9
            :allow-drop="allowDrop"
10
            :allow-drop="allowDrop"
10
            :allow-drag="allowDrag"
11
            :allow-drag="allowDrag"
11
            :data="treeData"
12
            :data="treeData"
14
            default-expand-all
15
            default-expand-all
15
            node-key="'id'"
16
            node-key="'id'"
16
            @node-click="getCurrentNode"
17
            @node-click="getCurrentNode"
18
            @node-contextmenu="cancelCurrent"
17
            @node-drag-start="handleDragStart"
19
            @node-drag-start="handleDragStart"
18
            @node-drag-enter="handleDragEnter"
20
            @node-drag-enter="handleDragEnter"
19
            @node-drag-leave="handleDragLeave"
21
            @node-drag-leave="handleDragLeave"
135
const jsonData = ref<any>({});
137
const jsonData = ref<any>({});
136
138
137
const currentNode = ref<any>({});
139
const currentNode = ref<any>({});
140
const myTree = ref<any>(null);
138
141
139
/**
142
/**
140
 * el-tree拖拽start
143
 * el-tree拖拽start
169
172
170
// 获取当前节点
173
// 获取当前节点
171
function getCurrentNode(node: any) {
174
function getCurrentNode(node: any) {
172
  console.log(node);
173
  currentNode.value = node;
175
  if (currentNode.value === node) {
176
    myTree.value.setCurrentKey(null);
177
    currentNode.value = {};
178
  } else {
179
    currentNode.value = node;
180
  }
174
}
181
}
175
182
176
/**
183
/**
203
  }
210
  }
204
}
211
}
205
212
213
function cancelCurrent() {
214
  myTree.value.setCurrentKey(null);
215
  currentNode.value = {};
216
}
217
206
// 删除树结构
218
// 删除树结构
207
function removeItem(node: any, data: any) {
219
function removeItem(node: any, data: any) {
208
  if (data.children?.length) {
220
  if (data.children?.length) {
215
  const index = child.findIndex((d: any) => d.id === data.id);
227
  const index = child.findIndex((d: any) => d.id === data.id);
216
  child.splice(index, 1);
228
  child.splice(index, 1);
217
  treeData.value = [...treeData.value];
229
  treeData.value = [...treeData.value];
230
  if (!treeData.value?.length) {
231
    currentNode.value = {};
232
  }
218
}
233
}
219
function assignment(type: any) {
234
function assignment(type: any) {
220
  let r;
235
  let r;
429
  color: #606266;
444
  color: #606266;
430
  font-weight: 400;
445
  font-weight: 400;
431
}
446
}
447
:deep(.el-tree-node) {
448
  line-height: 30px;
449
  padding: 3px 0;
450
}
451
:deep(.is-current) {
452
  line-height: 30px;
453
  padding: 3px 0;
454
}
432
.tree-item {
455
.tree-item {
433
  display: flex;
456
  display: flex;
434
  justify-content: space-between;
457
  justify-content: space-between;