Reference: tree component (QQ group: the old group is gone, new group: 801142650) - DCloud plug-in market
Download plugin↓
Single choice↓
You can retrieve the id value through selectCondition
<template>
<view v-if="isShowConfirm" class="my-confirm-notice">
<view class="confirm-content-wrap1">
<!-- 内容 -->
{
{selectCondition}}
<view class="content_margin">
<view class="flex_row_center label_text">组织机构：
<input type="text" disabled="true" class="inputStyle" ref='groupInput' @click="popOrganization"
placeholder="请选择组织机构" :value='groupName'>
</view>
<view v-show="isShow" class="top_level">
<view class="flex_row_center label_text">
<view style="width: 140rpx;"></view>
<scroll-view style="height: 200px;" class="ly_tree_style" :scroll-y="true">
<ly-tree ref="tree" :treeData="treeData" v-if="ready" :showRadio="true" nodeKey="ids"
:checkOnClickNode="true" :expandOnClickNode="false" :defaultExpandAll="true"
@check='handleCheck' :props="props"></ly-tree>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
props: {
label: 'labels' // 指把数据中的‘categoryName’当做label也就是节点名称
},
selectCondition:{}, //存放对应的id值
isShowConfirm: true,
treeData: [],
ready: false,
isShow: false,
defalutValue: '请选择组织机构',
groups: [],
groupName: ''
}
},
created() {
console.log('created')
},
mounted() {
console.log('mounted')
this.loadData()
},
methods: {
// this.$refs.tree.setCheckAll(false);
popOrganization() {
this.isShow = !this.isShow;
},
loadData() {
setTimeout(() => {
this.treeData = [{
ids: 1,
labels: '客流分析与管理1',
children: [{
ids: 11,
labels: 'IT部'
},
{
ids: 12,
labels: '运维部'
},
{
ids: 13,
labels: '营销部'
},
{
ids: 14,
labels: '实施部'
},
{
ids: 15,
labels: '售后部'
},
]
},
{
ids: 2,
labels: '一级2',
children: [{
ids: 21,
labels: '二级21'
},
{
ids: 22,
labels: '二级22'
},
]
},
{
ids: 3,
labels: '一级3',
children: [{
ids: 31,
labels: '二级31'
},
{
ids: 32,
labels: '二级32'
},
{
ids: 33,
labels: '二级33'
},
{
ids: 34,
labels: '二级34'
},
{
ids: 35,
labels: '售后部'
},
]
},
];
this.ready = true;
}, 2000);
},
handleCheck(obj) {
console.log('handleCheck=' + JSON.stringify(obj))
this.getSelectData(obj.node);
},
getSelectData(obj) {
let groupParam = '';
let groupNames = '';
if (obj.checked) {
groupParam = obj.data.ids;
groupNames = obj.data.labels;
} else {
groupParam = '';
groupNames = '';
}
this.groupName = groupNames;
this.selectCondition = {
'deptId': groupParam
};
console.log('selectCondition=' + groupParam)
},
}
}
</script>
<style lang="scss">
.my-confirm-notice {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
}
.confirm-content-wrap1 {
position: relative;
left: 0;
right: 0;
// width: 60%;
width: 90%;
height: 247px;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 10px;
z-index: 999;
user-select: none;
}
.content_margin {
padding: 15px 0px 15px 0px;
}
.flex_row_center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.label_text {
font-size: 28rpx;
color: #555555;
}
.inputStyle {
border: #bababa 0.5px solid;
width: 169px;
height: 34px;
box-sizing: border-box;
font-size: 13px;
padding: 3px 2px;
}
.top_level {
position: fixed;
z-index: 100;
width: 90%;
}
.ly_tree_style {
border: #F5F5F5 1px solid;
width: 169px;
}
</style>
Notice:
The default keys in treeData of this component are id and label. If you want to change it to ids and label as above
1.
2.
3. 
Multiple selection↓
You can retrieve the id value through selectCondition
<template>
<view v-if="isShowConfirm" class="my-confirm-notice">
<view class="confirm-content-wrap1">
<!-- 内容 -->
<view class="content_margin">
<view class="flex_row_center label_text">组织机构：
<input type="text" disabled="true" class="inputStyle" ref='groupInput'
@click="popOrganization" placeholder="请选择组织机构" :value='groupName'>
</view>
<view v-show="isShow" class="top_level">
<view class="flex_row_center label_text">
<view style="width: 140rpx;"></view>
<scroll-view style="height: 200px;" class="ly_tree_style" :scroll-y="true">
<ly-tree ref="tree" :treeData="treeData" v-if="ready"
nodeKey="id" @node-expand="handleNodeExpand"
@node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false"
:defaultExpandAll="true" @check-change="handleCheck"
></ly-tree>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShowConfirm: true,
treeData:[],
ready:false,
isShow:false,
defalutValue:'请选择组织机构',
groups:[],
groupName:''
}
},
created() {
console.log('created')
},
mounted() {
console.log('mounted')
this.loadData()
},
methods: {
// this.$refs.tree.setCheckAll(false);
popOrganization() {
this.isShow = !this.isShow;
},
loadData() {
setTimeout(()=> {
this.treeData = [
{
id:1,label:'客流分析与管理',
children:[
{id:11,label:'IT部'},
{id:12,label:'运维部'},
{id:13,label:'营销部'},
{id:14,label:'实施部'},
{id:15,label:'售后部'},
]
},
{
id:2,label:'一级2',
children:[
{id:21,label:'二级21'},
{id:22,label:'二级22'},
]
},
{
id:3,label:'客流分析与管理',
children:[
{id:31,label:'IT部'},
{id:32,label:'运维部'},
{id:33,label:'营销部'},
{id:34,label:'实施部'},
{id:35,label:'售后部'},
]
},
];
this.ready = true;
},2000);
},
handleNodeExpand(obj) {
console.log('handleNodeExpand='+JSON.stringify(obj))
},
handleNodeClick(obj) {
//console.log('handleNodeClick='+JSON.stringify(obj));
},
handleCheck(obj) {
console.log('handleCheck='+JSON.stringify(obj))
this.getSelectData(obj.node);
},
getSelectData(obj) {
if(obj.checked) {
if(this.groups.indexOf(obj.data) != -1) {
console.log('groups.contains')
} else {
this.groups.push(obj.data);
}
} else {
var index = this.groups.indexOf(obj.data);
console.log('groups.splice==='+index)
if(index != -1) {
this.groups.splice(index,1);
}
}
let groupParam = '';
let groupNames = '';
for(var i=0;i< this.groups.length; i++) {
if(groupParam) {
groupParam = groupParam+','+this.groups[i].id;
} else {
groupParam = this.groups[i].id;
}
if(groupNames) {
groupNames = groupNames+','+this.groups[i].label;
} else {
groupNames = this.groups[i].label;
}
}
this.groupName = groupNames;
}
}
}
</script>
<style lang="scss">
.my-confirm-notice {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
}
.confirm-content-wrap1 {
position: relative;
left: 0;
right: 0;
// width: 60%;
width: 90%;
height: 247px;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 10px;
z-index: 999;
user-select: none;
}
.content_margin {
padding: 15px 0px 15px 0px;
}
.flex_row_center {
display: flex; flex-direction: row; justify-content: center; align-items: center;
}
.label_text {
font-size: 28rpx;color: #555555;
}
.inputStyle {
border: #bababa 0.5px solid; width: 169px;height: 34px; box-sizing: border-box; font-size: 13px; padding: 3px 2px;
}
.top_level {
position: fixed;z-index: 100;width: 90%;
}
.ly_tree_style {
border: #F5F5F5 1px solid; width: 169px;
}
</style>