[update 90328] 拆分拖拽,优化拖拽性能
This commit is contained in:
@@ -20,11 +20,9 @@
|
||||
@dragstart="changeDraggingStatus(true)"
|
||||
@dragend="changeDraggingStatus(false)"
|
||||
@drop="onDrop">
|
||||
<template #title="record">
|
||||
<div class="tree-operate-node"
|
||||
@mouseenter="handleTreeMouseover(record.id)"
|
||||
@mouseleave="handleTreeMouseout(record.id)"
|
||||
@click="handleSelectTreeNode(record)">
|
||||
<!-- 拖拽期间插槽频繁触发执行,导致卡顿,拖拽期间只显示节点名 -->
|
||||
<template #title="record" v-if="!dragging">
|
||||
<div class="tree-operate-node" @click="handleSelectTreeNode(record)">
|
||||
<a-icon class="parent-node-icon"
|
||||
type="folder"
|
||||
v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
||||
@@ -36,8 +34,7 @@
|
||||
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
|
||||
</a-tooltip>
|
||||
<span class="tree-node-custom-title" v-else>{{ record.name }} {{ record.itemName }}</span>
|
||||
<div class="tree-operate-node-btn-box"
|
||||
:class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
|
||||
<div class="tree-operate-node-btn-box tree-operate-node-btn-box-hide" v-if="!dragging">
|
||||
<!--新增-->
|
||||
<a-button icon="plus"
|
||||
class="tree-operate-node-btn"
|
||||
@@ -74,6 +71,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-spin>
|
||||
</div>
|
||||
@@ -883,4 +883,9 @@ export default {
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
// 鼠标滑动到节点,显示操作按钮
|
||||
.tree-node-custom-title:hover + .tree-operate-node-btn-box-hide {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user