Element Plus treeSelect多选checkbox时,无法展示选中数据

背景:
根据业务需要,需要展示一个下拉列表,下拉列表中是Tree级联选择,需要展示复选框
使用Element Plus中的treeselect组件(elementplus

在element中,展示tree数据需要按照固定的label/value的形式进行数据渲染,但在实际开发中,后台有固定的的数据格式,无法按照element要求返回,此时可以通过props给后台数据重定义属性名PROPS
例如:

<el-tree-select
    v-model="value"
    :data="data"
    :render-after-expand="false"
    show-checkbox
    :props:{
    	value:'后端返回的value属性名‘,
    	label:'后端返回的label属性名‘,
    	children:'后端返回的children列表,可用于渲染二级或N级菜单‘,
	}  
/>

通过上述方式在开启show-checkbox无法正常展示数据到select框中,此时需要将后端返回的数据的单独处理,去掉props属性!
例如:

let handleIndustryData = (list) => {
    let data = list.map(item => {
        return {
            label: item.industryCompetentName,
            value: item.id,
            children: item.children ? handleIndustryData(item.children) : []
        }
    })
    return data
}
引用\[1\]:根据提供的引用内容,可以看出作者在GitHub上报告了一个关于TreeSelect组件的bug,并提到了等待修复的问题。\[1\]引用\[2\]:根据提供的引用内容,可以看出作者在JSP源码中使用TreeSelect组件,并展示选中后的代码变化。\[2\]引用\[3\]:根据提供的引用内容,可以看出作者在使用Element-plusCheckBoxTreeSelect组件遇到了选中值追加在末尾的问题,并提供了一段示例代码来解决这个问题。\[3\] 问题: treeselect选中后的问题是什么? 回答: 根据提供的引用内容,没有明确指出treeselect选中后的问题是什么。但是可以推测,可能是选中值追加在末尾导致数据显示混乱的问题。\[3\] #### 引用[.reference_title] - *1* *3* [Vue3 [Element-plus] CheckBox / TreeSelect 选中值按照数据源排序](https://blog.csdn.net/oafzzl/article/details/125071029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [sys:treeselect选中变化,js取值,选中后的回调事件函数](https://blog.csdn.net/world_the_begin/article/details/103418207)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值