iview Tree 树形控件 回显数据处理

这是实现的效果

 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>