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
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

思路：

/*自定义树形控件的核心就是“组件自己调用自己”  这里将树形控件封装成一个子组件*/

/*组件调用方法*/

  

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