背景:
根据业务需要,需要展示一个下拉列表,下拉列表中是Tree级联选择,需要展示复选框
使用Element Plus中的treeselect组件(elementplus)
在element中,展示tree数据需要按照固定的label/value的形式进行数据渲染,但在实际开发中,后台有固定的的数据格式,无法按照element要求返回,此时可以通过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
}