安装

npm i hj-tree

说明

1.基于https://www.npmjs.com/package/mobile-tree-vue进行修改
2.一次性请求数据源,后端提供如下格式的接口数据。(具体的人不能带children属性)
3.数据源以children字段判断是能选择的还是能展开的。

使用

<template>
  <div class="index">
    <hj-tree :tree="tree"></hj-tree>
  </div>
</template>

<script>
import HJTree from 'hj-tree'
export default {
  data() {
    return {
      tree: [
        {
          label: '集团总部',
          total: 9,
          pid: null,
          id: '1',
          children: [
            {
              label: '集团党委',
              total: 6,
              pid: '1',
              id: '11',
              children: [
                {
                  label: '张三',
                  pid: '11',
                  id: '111'
                },
                {
                  label: '李四的',
                  pid: '11',
                  id: '112'
                },
                {
                  label: '王五哈',
                  pid: '11',
                  id: '113'
                },
                {
                  label: '小部门',
                  total: 3,
                  pid: '11',
                  id: '114',
                  children: [
                    {
                      label: '小部门',
                      total: 3,
                      pid: '114',
                      id: '1141',
                      children: [
                        {
                          label: '小部门',
                          total: 3,
                          pid: '1141',
                          id: '11411',
                          children: [
                            {
                              label: '11411张三非',
                              pid: '11411',
                              id: '114111'
                            },
                            {
                              label: '11411李四量',
                              pid: '11411',
                              id: '114112'
                            },
                            {
                              label: '11411王五',
                              pid: '11411',
                              id: '114113'
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              label: '集团经理层',
              total: 3,
              pid: '1',
              id: '12',
              children: [
                {
                  label: '12张三丰',
                  pid: '12',
                  id: '121'
                },
                {
                  label: '12李四',
                  pid: '12',
                  id: '122'
                },
                {
                  label: '12王五',
                  pid: '12',
                  id: '123'
                }
              ]
            },
            {
              label: '集团纪委',
              total: 0,
              pid: '1',
              id: '13',
              children: []
            }
          ]
        },
        {
          label: '第一事业部',
          total: 3,
          pid: null,
          id: '2',
          children: [
            {
              label: '2张三',
              pid: '2',
              id: '21'
            },
            {
              label: '2李四',
              pid: '2',
              id: '22'
            },
            {
              label: '2王五',
              pid: '2',
              id: '23'
            }
          ]
        },
        {
          label: '第二事业部',
          total: 0,
          pid: null,
          id: '3',
          children: []
        },
        {
          label: '第三事业部',
          total: 0,
          pid: null,
          id: '4',
          children: []
        },
        {
          label: '第四事业部',
          total: 0,
          pid: null,
          id: '5',
          children: []
        },
        {
          label: '第五事业部',
          total: 0,
          pid: null,
          id: '6',
          children: []
        },
        {
          label: '第六事业部',
          total: 3,
          pid: null,
          id: '7',
          children: [
            {
              label: '7张三',
              pid: '7',
              id: '71'
            },
            {
              label: '7李四',
              pid: '7',
              id: '72'
            },
            {
              label: '7王五',
              pid: '7',
              id: '73'
            }
          ]
        },
        {
          label: '第七事业部',
          total: 0,
          pid: null,
          id: '8',
          children: []
        }
      ]
    }
  },
  components: {
    HJTree
  }
}
</script>

<style></style>

props

| 属性 | 是否必填 | 说明 | 数据类型 | 数据结构 | | :---------: | :------: | :--------------------------: | :------: | :----------------------------------: | | debug | 否 | 是否打开log | Boolean | false | | tree | 是 | 组织结构树,与 request 选其一 | array | [{label: '',total: '',children: []}] | | isNum | 否 | 是否显示数量 | Boolean | false | | unit | 否 | 单位 | string | 人 | | color | 否 | 主题色 | string | #0984e3 | | isCheckbox | 否 | 是否显示多选 | Boolean | false | | checkboxKey | 否 | 数据源显示的key | String | label | | pid | 否 | 数据源父类的key | String | label | | children | 否 | 数据源子类的key | String | label | | btnText | 否 | 按钮文本 | String | 确定 |

events

| 事件 | 说明 | 返回值 | | :------: | :------------: | :----------------------------------------: | | treeChoose | 选择结果 | array：[{id: '', label: '', pid: ''}] |

版本说明

1.0.0 初始版本
1.1.2 支持半选