tree树节点
<template> <div class="main"> <div class="left"> <el-tree draggable :allow-drop="allowDrop" @node-drop="sort" ref="tree" :data="data" :props="defaultProps" default-expand-all node-key="id" highlight-current @node-click='nodeclick' > <span class="custom-tree-node" slot-scope="{ node, data }"> <span @mouseenter="enton(data,node)" @mouseleave="offent(data)" > <span class="notitle">{{ node.label }} <el-tag type="success" size="mini" v-show="data.status == 1" >已发布</el-tag> </span> <span v-if="istra == data|| node.level==1" class="btn"> <el-button type="text" size="mini" @click.stop="resert(data,node)" v-show="data.status!==1" > 发布 </el-button> <el-button type="text" size="mini" > 编辑 </el-button> </span> <span > </span> </span> </span> </el-tree> </div> <div class="right"></div> </div> </template> <script> export default { beforeCreate(){ console.log('1111111') this.$store.commit('chisshow') }, destroyed(){ this.$store.commit('reisshow') }, mounted(){ console.log(this.data) // this.resedata=this.data.map(item =>{ // return Object.assign(item,{statue:0}) // }) // console.log(this.resedata) // var ase = [1,3,5,6,8,9] // console.log(ase.some(5)) if (JSON.parse( window.localStorage.getItem('daid'))) { this.dataid =JSON.parse( window.localStorage.getItem('daid')) // console.log(this.dataid.some(item =>{ // return item == this.resedata.id // })) }else{ this.dataid = [] } }, data() { return { isshow:true, resedata:'', isid:'', istra:'', ifsuccess:'', dataid:[], allid:[], data: [{ id: 1, label: '一级 1', status:0, children: [{ id: 4, label: '二级 1-1', status:0, children: [{ id: 9, label: '三级 1-1-1', status:0, }, { id: 10, label: '三级 1-1-2', status:0, }] }] }, { id: 2, label: '一级 2', status:0, children: [{ id: 5, label: '二级 2-1', status:0, }, { id: 6, label: '二级 2-2', status:0, }] }, { id: 3, label: '一级 3', status:0, children: [{ id: 7, label: '二级 3-1', status:0, }, { id: 8, label: '二级 3-2', status:0, children: [{ id: 11, label: '三级 3-2-1', status:0, }, { id: 12, label: '三级 3-2-2', status:0, }, { id: 13, label: '三级 3-2-3', status:0, }] }] }], defaultProps: { children: 'children', label: 'label', status:'status' } }; }, methods: { allowDrop(draggingNode, dropNode, type){ if(draggingNode.level === dropNode.level){ if(draggingNode.parent.id === dropNode.parent.id){ return type === 'prev' } }else{ // 不同级进行处理 } }, sort(draggingNode,dropNode,type,event) { /* console.log('排序') console.log(dropNode) //dropNode.parent.childNodes =[] 拖拽之后的重新组合的数组 */ let obj = { aboveId:'', arr:[] } obj.aboveId = dropNode.data.aboveId for (let item of dropNode.parent.childNodes) { obj.arr.push(item.data.id) } }, nodeclick(val,node,){ console.log(val,node) }, enton(da,no){ this.istra = da }, offent(da){ this.istra='' console.log('444') }, // 发布 resert(da,no){ // console.log(da.status) // this.dataid.push(da.id) // window.localStorage.setItem('daid',JSON.stringify(this.dataid)) // this.$store.commit('saveid',this.dataid) // this.ifsuccess = da da.status = 1 } }, }; </script> <style lang="scss" scoped> .main{ display: flex; height: 100vh; .left{ width: 40%; background: aqua; .notitle{ width: 70px; display: inline-block; } .btn{ margin-left: 50px; } } .right{ flex: 1; background: blueviolet; } } </style>
<template>
<div class="main">
<div class="left">
<el-tree
draggable
:allow-drop="allowDrop"
@node-drop="sort"
ref="tree"
:data="data"
:props="defaultProps"
default-expand-all
node-key="id"
highlight-current
@node-click='nodeclick'
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span @mouseenter="enton(data,node)"
@mouseleave="offent(data)" >
<span class="notitle">{{ node.label }}
<el-tag type="success" size="mini"
v-show="data.status == 1"
>已发布</el-tag>
</span>
<span v-if="istra == data|| node.level==1" class="btn">
<el-button
type="text"
size="mini"
@click.stop="resert(data,node)"
v-show="data.status!==1"
>
发布
</el-button>
<el-button
type="text"
size="mini"
>
编辑
</el-button>
</span>
<span >
</span>
</span>
</span>
</el-tree>
</div>
<div class="right"></div>
</div>
</template>
<script>
export default {
beforeCreate(){
console.log('1111111')
this.$store.commit('chisshow')
},
destroyed(){
this.$store.commit('reisshow')
},
mounted(){
console.log(this.data)
// this.resedata=this.data.map(item =>{
// return Object.assign(item,{statue:0})
// })
// console.log(this.resedata)
// var ase = [1,3,5,6,8,9]
// console.log(ase.some(5))
if (JSON.parse( window.localStorage.getItem('daid'))) {
this.dataid =JSON.parse( window.localStorage.getItem('daid'))
// console.log(this.dataid.some(item =>{
// return item == this.resedata.id
// }))
}else{
this.dataid = []
}
},
data() {
return {
isshow:true,
resedata:'',
isid:'',
istra:'',
ifsuccess:'',
dataid:[],
allid:[],
data: [{
id: 1,
label: '一级 1',
status:0,
children: [{
id: 4,
label: '二级 1-1',
status:0,
children: [{
id: 9,
label: '三级 1-1-1',
status:0,
}, {
id: 10,
label: '三级 1-1-2',
status:0,
}]
}]
}, {
id: 2,
label: '一级 2',
status:0,
children: [{
id: 5,
label: '二级 2-1',
status:0,
}, {
id: 6,
label: '二级 2-2',
status:0,
}]
}, {
id: 3,
label: '一级 3',
status:0,
children: [{
id: 7,
label: '二级 3-1',
status:0,
}, {
id: 8,
label: '二级 3-2',
status:0,
children: [{
id: 11,
label: '三级 3-2-1',
status:0,
}, {
id: 12,
label: '三级 3-2-2',
status:0,
}, {
id: 13,
label: '三级 3-2-3',
status:0,
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label',
status:'status'
}
};
},
methods: {
allowDrop(draggingNode, dropNode, type){
if(draggingNode.level === dropNode.level){
if(draggingNode.parent.id === dropNode.parent.id){
return type === 'prev'
}
}else{
// 不同级进行处理
}
},
sort(draggingNode,dropNode,type,event) {
/* console.log('排序')
console.log(dropNode) //dropNode.parent.childNodes =[] 拖拽之后的重新组合的数组 */
let obj = {
aboveId:'',
arr:[]
}
obj.aboveId = dropNode.data.aboveId
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id)
}
},
nodeclick(val,node,){
console.log(val,node)
},
enton(da,no){
this.istra = da
},
offent(da){
this.istra=''
console.log('444')
},
// 发布
resert(da,no){
// console.log(da.status)
// this.dataid.push(da.id)
// window.localStorage.setItem('daid',JSON.stringify(this.dataid))
// this.$store.commit('saveid',this.dataid)
// this.ifsuccess = da
da.status = 1
}
},
};
</script>
<style lang="scss" scoped>
.main{
display: flex;
height: 100vh;
.left{
width: 40%;
background: aqua;
.notitle{
width: 70px;
display: inline-block;
}
.btn{
margin-left: 50px;
}
}
.right{
flex: 1;
background: blueviolet;
}
}
</style>
