首页 > 其他 > 详细

tree树节点

时间:2020-06-14 18:03:48      阅读:45      评论:0      收藏:0      [点我收藏+]
<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==1class="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.parsewindow.localStorage.getItem(‘daid‘))) {
    this.dataid =JSON.parsewindow.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(draggingNodedropNodetype){
                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{
  displayflex;
  height100vh;
    .left{
      width40%;
      backgroundaqua;

      .notitle{
        width70px;
        displayinline-block;
      }
      .btn{
        margin-left50px;
      }
    }
    .right{
      flex1;
      backgroundblueviolet;
    }
}

</style>


tree树节点

原文:https://www.cnblogs.com/hwj369/p/13125595.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!