这是实现的效果
load-data : 使用到 异步加载数据的方法 ,来渲染数据,默认会有两个传参 因为我们要回显,所以要用到第二个参callback,来处理成我们想要的数据
on-check-change :点击复选框时触发 ,返回 当前已勾选节点的数组、当前项,使用这个基本可以满足业务要求了
show-checkbox:是否显示多选框
multiple:是否支持多选
给节点设置 (父子节点都适用)
expand:是否下拉
checked
:全选状态
indeterminate: 半选状态
<template>
<div>
项目点类型
<Tree
:data="hospital"
:load-data="hospitalLoad"
ref="tree"
@on-check-change="hospitalBtn"
show-checkbox
multiple
></Tree>
</div>
</template>
<script>
export default {
data() {
return {
hospital: [
{
title: '医院',
loading: false,
expand: false, //下拉
checked: false, //全选状态
indeterminate: false, //半选状态
children: [], // 这个是二级里面的数据
},
],
hospitalList: [
{
title: '标题一',
id:'1',
},
{
title: '标题二',
id:'2',
},
{
title: '标题三',
id:'3',
},
{
title: '标题四',
id:'4',
},
{
title: '标题五',
id:'5',
},
{
title: '标题六',
id:'6',
},
],
sceneList:[
{
title: '标题四',
id:'4',
},
]
};
},
methods: {
async hospitalLoad(item, callback) {
let ind = this.hospitalList.map(e => {
//这处理你想要的数据,返回二级菜单的数据
return {
title: e.title, //这里的title是必要的,显示二级的标题
checked: false, //true 勾选 fales 不勾选
};
});
//如果想处理回显可以在这里判断整体数据和返回数据是否相同,然后改变checked的值即可
ind.forEach(i => {
//sceneList假设是已经选择的数据
this.sceneList.forEach(item => {
if (i.id== item.id) {
i.checked = true;
}
});
});
callback(ind); //返回下拉内容
},
hospitalBtn(item) {
console.log(item);
},
},
};
</script>