vue+iviewUI树形结构tree多选，编辑时重新勾选选中的数据，不渲染页面

先上效果图
点击商家门店，显示下方树形结构

html

js

data(){
	return {
		showShop:false,   // 树形结构是否显示
		goodsShopList:[],   // 树形结构列表
		selectList:[],   // 选中的数据列表
		shopClass1:'',    // input绑定的数据
		this.modifyFromData:{     // 传给后端的值
			shopIdList:[]
		}
	}
},
methods:{
	// 点击input框展示树形结构
	changeShop(){
        this.showShop=true
    },
    //  点击勾选，做的数据处理，用来传给后端，如下图1
    changeVal(){
    	this.modifyFromData.shopIdList = data.filter(i=>(i.id)).map(j=>j.id);     // 将选中的数据只保留id传给后端
        this.shopClass1 = data.filter(i=>(i.id)).map(j=>j.title).toString();    //选中之后input框展示的值
        console.log(data, this.shopClass1,"数据结构",this.modifyFromData.shopIdList)
    },
    // 获取树形结构列表
    getAllShop(type){
		// 这里正常的调用接口就行了，就不写了，获取到的树形结构列表  this.goodsShopList
		// 判断一下编辑时处理的数据，属性结构，主要会遇到的问题就是编辑时的回显，以及编辑时，取消勾选，再重新勾选时，不会渲染页面的问题
		if(type){
			this.goodsShopList = this.formartData(this.selectList,this.goodsShopList)
		}
		
	},
	//处理tree数据回显,obj：选中的数据(编辑时后端返回的)，arr：原数据
    formartData(obj, arr) {
		for (const key in obj) {
			let arr1=[]
			arr.map((item) => {
                item.children.map((v) => {
            	    obj.map((j) => {
                        if (v.id == j.shopNo) {
                            v.checked = true;  // 选中数据的唯一标识与原数据的唯一标识相同，则给原数据加上checked，选中状态
                            arr1.push(v.title);   // 这里是展示input框中显示的名字
                        }
                    })
                })
            })
            this.shopClass1 = arr1.toString()
        }
        let list=JSON.parse(JSON.stringify(arr))
        return list;
    },
    
}

图1：

至于编辑时获取到的数据，以及点击按钮提交的数据就不一一赘述了