<template>
<div>
<!-- 选中树,进行上下移动 -->
<div class="question_info_lists">
<el-tree ref="tree" :key="tree_key" @node-click="(data, node, item) => handleNodeClick(data, node, item)" :data="treeData" node-key="id" :default-expanded-keys="defaultExpand" default-expand-all>
<span class="custom-tree-node" slot-scope="{ node, data , store}">
<span :class="data.label.indexOf('维护')!=-1?'node_labe1':'node_labe2'">{{ node.label }}</span>
</span>
</el-tree>
</div>
<el-button type="primary" size="mini" @click="UpClick">
上移
</el-button>
<el-button type="primary" size="mini" @click="downClick">
下移
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: "模板1(发布)",
children: [
{
id: 4,
label: "模板1(维护)",
},
]
},
{
id: 2,
label: "模板2(发布)",
children: [
]
},
{
id: 3,
label: "模板3(维护)",
children: []
}
],
tree_key: 0,
defaultExpand: [],
nodeData: {
}
};
},
methods: {
// 节点上移
nodeUp(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const cIndex = children.findIndex(d => d.id === data.id);
if (parent.level === 0 && cIndex === 0) {
return;
} else if (parent.level !== 0 && cIndex === 0) {
//不同父节点中移动
// alert("不同父节点中移动");
// const parent2 = parent.parent
// const children2 = parent2.data.children || parent2.data
// const pIndex2 = parseInt(children2.findIndex(p => p.id === parent.data.id), 10) - 1
// if (pIndex2 < 0) return
// children2[pIndex2].children.push(data)
// children.splice(cIndex, 1)
// this.defaultExpand[0] = children2[pIndex2].id
} else if (
(parent.level === 0 && cIndex !== 0) ||
(parent.level !== 0 && cIndex !== 0)
) {
const tempChildrenNodex1 = children[cIndex - 1];
const tempChildrenNodex2 = children[cIndex];
this.$set(children, cIndex - 1, tempChildrenNodex2);
this.$set(children, cIndex, tempChildrenNodex1);
this.defaultExpand[0] = data.id;
}
this.tree_key++;
},
// 节点下移
nodeDown(store, node, data) {
console.log('112121212', store);
const parent = node.parent;
const children = parent.data.children || parent.data;
const cIndex = children.findIndex(d => d.id === data.id);
const cLength = children.length - 1; // 最边上的节点
const allLevel = store.data.length - 1; // 树的深度
if (parent.level === allLevel && cIndex === cLength) {
// 最最末的节点
return;
} else if (parent.level !== allLevel && cIndex === cLength) {
//父节点不同
alert("不能移动");
// const parent2 = parent.parent
// const children2 = parent2.data.children || parent2.data
// const pIndex2 = parseInt((children2.findIndex(p => p.id === parent.data.id)), 10)
// if (pIndex2 === allLevel) return
// children2[pIndex2 + 1].children.push(data)
// children.splice(cIndex, 1)
// this.defaultExpand[0] = children2[pIndex2 + 1].id
} else if (
(parent.level === allLevel && cIndex !== cLength) ||
(parent.level !== allLevel && cIndex !== cLength)
) {
// 父节点相同
const tempChildrenNodex1 = children[cIndex + 1];
const tempChildrenNodex2 = children[cIndex];
this.$set(children, cIndex + 1, tempChildrenNodex2);
this.$set(children, cIndex, tempChildrenNodex1);
this.defaultExpand[0] = data.id;
}
this.tree_key++;
},
handleNodeClick(data, node) {
console.log('1111', data, node, node.store);
this.nodeData = {
data: data,
node: node,
store: node.store,
}
},
UpClick() {
this.nodeUp(this.nodeData.node, this.nodeData.data)
},
downClick() {
this.nodeDown(this.nodeData.store, this.nodeData.node, this.nodeData.data)
},
}
};
</script>
<style >
.question_info_lists
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background: #e3f4fb !important;
color: green !important;
}
.node_labe1 {
color: red !important;
}
.node_labe2 {
color: green !important;
}
/* .el-tree-node__content {
color: blue !important;
} */
</style>
选中树,进行上下移动
最新推荐文章于 2024-05-20 15:17:08 发布