1.1.3 • Published 11 months ago
hj-tree v1.1.3
安装
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 支持半选