<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>
原文:https://www.cnblogs.com/hwj369/p/13125595.html