(1)无数据显示如下图
(2)树形方法处理后的地区数据--错误属性“name”
(3)处理后的地区数据-正确属性“label”
修改 “name” 为 “label”,只能是“label”,“label”在TreeSelect组件中才能获取到数据,如下图三个“label”处原来是“name”,修改为“label”即可
正确数据格式:
(4)修改为label和加了id之后,正确显示:
(5)处理代码
/**
* region树形数据转换
*/
export function regionTreeDataTranslate(dataList) {
let tree = {};
let treeArray = [];
dataList.forEach(data => {
// 确保省份节点存在
if (!tree[data.province]) {
tree[data.province] = {
cities: {},
id: data.province // 设置省份的id为label的值
};
}
// 确保城市节点存在
if (!tree[data.province].cities[data.city]) {
tree[data.province].cities[data.city] = {
districts: [],
id: data.city // 设置城市的id为label的值
};
}
// 添加区县到对应城市
tree[data.province].cities[data.city].districts.push({
label: data.district,
id: data.district // 设置区县的id为label的值
});
});
for (let province in tree) {
let provinceNode = {
label: province,
id: province, // 设置省份节点的id
children: []
};
for (let city in tree[province].cities) {
let cityNode = {
label: city,
id: city, // 设置城市节点的id
children: tree[province].cities[city].districts // 区县已经是对象,包含了label和id
};
provinceNode.children.push(cityNode);
}
treeArray.push(provinceNode);
}
return treeArray;
}
处理的数据:
解释:在 <TreeSelect> 组件中,通常 label 是用于下拉列表展示给用户看到并选择的文本,而 value(或 id,取决于组件的具体实现和属性命名)则是用于在表单或数据绑定中标识节点的唯一值。当用户选择一个节点时,v-model 绑定的值通常会是该节点的 value 或 id,而不是 label。id 或 value(取决于你的具体配置)通常用于内部处理和绑定,比如表单数据的提交或者后续的逻辑处理。