移动端通讯录组织树https://github.com/yangjingyu/vs-tree

<vs-tree :data="treeDate" :props="props" breadcrumb :max="5" show-checkbox @limit-check="limitCheck" @check-change="handleCheckChange"> </vs-tree> <script> const data = [ {name: '上海分部', id: 2, pid: 0, children: []}, {name: '成都分部', id: 3, pid: 0}, {name: '广州分部', id: 4, pid: 0}, {name: '沈阳分部', id: 5, pid: 0}, {name: '张三', id: 6, pid: 0, isLeaf: true}, {name: '李四', id: 7, pid: 0, isLeaf: true}, {name: '王五', id: 8, pid: 0, isLeaf: true}, {name: '项目管理部', id: 1006, pid: 1}, {name: '张小虎', id: 1007, pid: 1, isLeaf: true}, {name: '王小二', id: 1008, pid: 1, isLeaf: true}, {name: '李小三', id: 1009, pid: 1, isLeaf: true} ] export default { data() { return { treeDate: data, props: { label: 'name', children: 'children', isLeaf: 'isLeaf' }, count: 1 }; }, methods: { handleCheckChange(data, checked, indeterminate) { console.log(data, checked, indeterminate); }, handleNodeClick(data) { console.log(data); }, limitCheck() { alert('超过最大限制数量'); } } }; </script>