Vue自定义树形控件使用详解

本文实例为大家分享了vue自定义树形控件的使用方法，供大家参考，具体内容如下

效果图：

数据结构：

tree: {
        title: '', //  标题（姓名） 
        key: '0',
        head: '', // 头像
        selectstatus: false, // checkbox选中状态
        children: [
          {
            title: '旺旺一部',
            key: '0-0',
            head: '',
            selectstatus: false,
            children: [
              {
                key: '0-0-0',
                title: '旺仔1',
                head: require('@/assets/wan.jpg'),
                selectstatus: false
              }
            ]
          },
          {
            title: '旺旺二部',
            key: '0-1',
            head: '',
            selectstatus: false,
            children: [
              {
                title: '旺旺二部一队',
                key: '0-1-0',
                head: '',
                selectstatus: false,
                children: [
                  {
                    title: '旺旺二部一队一班',
                    key: '0-1-0-2',
                    head: '',
                    selectstatus: false,
                    children: [
                      {
                        title: '旺仔3',
                        key: '0-1-0-2-0',
                        head: require('@/assets/wan.jpg'),
                        selectstatus: false
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

思路：

/*自定义树形控件的核心就是“组件自己调用自己”  这里将树形控件封装成一个子组件*/
<template>
  <div>
    <div class="tree-custom">
      <div :style="indent" @click="togglechildren"> //togglechildren事件为“展开内容”、“关闭内容”的控制事件  
       /* 
       这里是递归数据显示的具体内容    
       例如：本项目递归的具体内容从效果图上看就是“图片/头像”、“标题/名字”、“null/checkbox”
       效果图显示逻辑是：
       <div v-if="!headimg && label" >
       //如果没有头像图片有标题，则显示 “箭头-标题”样式
        </div>
        <div v-if="headimg">
       //如果有头像图片，则显示 “头像-姓名-checkbox”样式
        </div>
       */      
      </div>
      <tree-custom  // “自己调用自己”
        :key="children.key"  // key值唯一 
        v-for="children in treedata"  
        v-if="showchildren"  //  根据 togglechildren事件 判断是否展开内容
        :treedata="children.children"   //  下面都是一些属性，应该都能看懂吧！不多说了！
        :label="children.title"
        :headimg="children.head"
        :pkid="children.key"
        :depth="depth+1"  //  这个是用来控制每行缩进的样式，可移步下方=>indent ()看具体用处
        :selectstatus="children.selectstatus"
        v-bind="$attrs"  //  这两个是用来实现祖孙组件通信的
        v-on="$listeners"
      >
      </tree-custom>
    </div>
  </div>
</template>
<script>
export default {
  name: 'treecustom', // 要给我们的组件一个名字！不然怎么调用呢
  data () {
    return {
      showchildren: true,  // 这个就是控制是否显示内容的data~也就是展开和收起！
      currentinfodata: {} // 这个的用处是获取当前行的数据，为了简洁在上方代码的具体用处已经被我删掉了~意义不大
    }
  },
  //对象的默认值应由一个工厂函数返回，避免采坑
  props: {
    treedata: {
      type: array,
      default: () => []
    },
    label: {
      type: string,
      default: () => ''
    },
    depth: {
      type: number,
      default: () => 0
    },
    headimg: {
      type: string,
      default: () => ''
    },
    pkid: {
      type: string,
      default: () => ''
    },
    selectstatus: {
      type: boolean,
      default: () => null
    }
  },
  computed: {
    indent () {  // 定义不同层级的缩进样式
      return { transform: `translate(${(this.depth - 1) * 15}px)` }
    }
  },
  methods: {
    togglechildren () {
      this.showchildren = !this.showchildren
    },
    checkboxselectchange (e) {
      const checked = e.target.checked
      if (checked) {
       //使用$listeners方法调用祖辈的函数，因为这边是递归组件所以组件之间可能并不是严格的父子关系，所以$emit、$parent等方法都是不合适的
        this.$listeners.addselecteddata(this.currentinfodata)
      }
      if (!checked) {
        this.$listeners.deleteselecteddata(this.currentinfodata)
      }
    },
    getcurrentinfo (label, headimg, pkid) {
      this.currentinfodata = {
        key: pkid,
        title: label,
        head: headimg
      }
    }
  }
}
</script>

/*组件调用方法*/
<div class="tree-scroll">
  <tree-custom
    :label="tree.title"
    :headimg="tree.head"
    :treedata="tree.children"
    :pkid="tree.key"
    :depth="0"
    :selectstatus="tree.selectstatus"
    @addselecteddata="addselecteddata"
    @deleteselecteddata="deleteselecteddata" />
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。