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

本文链接：https://blog.youkuaiyun.com/wang_59881/article/details/126410112

本文介绍如何在网页中实现点击商家门店名触发树形结构展示，选择项同步至后台。通过 Vue.js 实现动态加载和数据处理，包括输入框联动、勾选变化后的数据整理与提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图
点击商家门店，显示下方树形结构
在这里插入图片描述

html

<Col span="14">
	<FormItem label="商家门店" prop="shopIdList">
		<Poptip trigger="hover" word-wrap width="400" placement='bottom' :content="shopClass1">
			<Input v-model="shopClass1" style="max-width:400px" @on-focus="changeShop"></Input>
		</Poptip>
		<div v-if="showShop">
			<Tree
				ref="orgCanTree"
				v-model="goodsShopList"
				:data="goodsShopList"
				show-checkbox
				@on-check-change="changeVal"
			></Tree>
		</div>
	</FormItem>
</Col>

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：
在这里插入图片描述
至于编辑时获取到的数据，以及点击按钮提交的数据就不一一赘述了