具有增、删、改、查功能的vue-tree树组件

雨点打透心脏的1/2处 2023-05-22 06:50 1阅读 0赞

tree.vue

<template>
      <div>
        <div class="all-div" v-if="model.name">
          <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }">
            <span v-show="model.children.length" @click="expandOrCollapse">
              <img v-if="model.isOpen" src="../../static/img/down.png">
              <img v-else src="../../static/img/right.png">
            </span>
            <div class="hover-div" @mouseover="flag=true" @mouseout="flag=false">
              <span @click="jump(model.url)">{
       {model.name}}</span>
              <span v-show="flag==true" @click="add"><img src="../../static/img/add.png"></span>
              <span v-show="flag==true" @click="remove(model)"><img src="../../static/img/delete.png"></span>
              <span v-show="flag==true" @click="edit"><img src="../../static/img/edit.png"></span>
              
            </div>
    
          </div>
        </div>
        <navigation v-if="model.isOpen" v-for="row in model.children" :key="row.name" :model="row" :length="model.children.length"></navigation>
      </div>
    </template>
    
    <script>
      export default {
        name: 'navigation',
        // 使用`编辑树`组件需要传递的数据
        props: {
          // 编辑树对象
          model: {
            type: Object
          },
    
          length: {
            type: Number
          }
        },
    
        data () {
          return {
            flag:false
    
          }
        },
    
        methods: {
          // 添加节点
          add(){
            let val = prompt("请输入要添加的节点的名称：");
            if (val) {
              this.model.children.push({
                name: val,
                level: this.model.level + 1,
                isOpen: true,
                children: []
              });
            }
    
          },
    
          // 移除节点
          remove(model){
            var self = this;
            alert('确认删除吗?');
            if (self.$parent.model) {
              self.$parent.model.children.forEach((item, index) => {
                if (item.name == model.name) {
                self.$parent.model.children.splice(index, 1);
              }
            })
            }
          },
    
          // 编辑节点名称
          edit(){
            var self = this;
            let rename = prompt('请输入修改后的节点名称：');
            // 使用正则进行重命名的差错校验
            if (!rename.length) {
              alert('请输入正确的节点名称');
              return;
            }
            self.model.name = rename;
          },
    
          /**
           * 展开/收起功能
           */
          expandOrCollapse(){
            this.model.isOpen = !this.model.isOpen;
          },
          jump(url){
            var self = this;
            self.$router.push({path:url})
          }
    
          /*// 升序排列
           orderAsce(){
           function compare(property) {
           return function (a, b) {
           var value1 = a[property];
           var value2 = b[property];
           return value1 - value2;
           }
           }
           this.model.children.sort(compare('name'));
           },
    
           // 降序排列
           orderDesc(){
           this.orderAsce();
           this.model.children.reverse();
           }*/
        },
      }
    </script>
    
    
    <style scoped>
      .all-div{
        margin-left: 6%;
    
      }
      .itemRow {
        text-align: left;
        padding-top: 2%;
        padding-bottom: 2%;
      }
      .itemRow span,.itemRow img{
        cursor: pointer;
      }
      .itemRow span{
        font-size: 1.1vw;
      }
      .hover-div{
        display:inline-block;
      }
    
    
    </style>

父组件代码如下：

leftNavigation.vue

<template>
      <div id="all">
        <tree :model="root" :length="length"></tree>
      </div>
    </template>
    <style scoped>
      #all{
        width:100%;
        height: 100%;
      }
    
    </style>
    <script>
      import tree from './tree.vue'
      export default{
        data(){
          return{
            root:{
              name:"根节点",
              level:0,
              isOpen:true,
              children:[
                {
                  name:"节点1",
                  level:1,
                  url:"/homePage/middle/navLeftFirst",
                  isOpen:false,
                  children:[
                    {
                      name:"节点1-1",
                      level:2,
                      isOpen:true,
                      children:[]
                    },
                    {
                      name:"节点1-2",
                      level:2,
                      isOpen:true,
                      children:[]
                    }
                  ]
                },
                {
                  name:"节点2",
                  level:1,
                  url:"/homePage/middle/navLeftSecond",
                  isOpen:false,
                  children:[
                    {
                      name:"节点2-1",
                      level:2,
                      isOpen:true,
                      children:[]
                    },
                    {
                      name:"节点2-2",
                      level:2,
                      isOpen:true,
                      children:[]
                    }
                  ]
    
                }
              ]
            },
            length:2
          }
        },
        components:{
          tree
        }
      }
    </script>