vue 中 el-tree-select 使用过程中 json对象替换键值名称
vue3项目中,使用el-tree-select选择类别(单选模式),后台返回json数据,其中某一键值为“id",而el-tree-select要求为"value"。
const sortTreeData = [{
id: '西点',
label: '西点',
children: [{
id: '面包',
label: '面包',
children: [{
id: '牛角包',
label: '牛角包',
},
{
id: '排包',
label: '排包',
},
{
id: '法棍',
label: '法棍',
},
],
},
{
id: '蛋糕',
label: '蛋糕',
children: [{
id: '蜂蜜蛋糕',
label: '蜂蜜蛋糕',
},
{
id: '奶油蛋糕',
label: '奶油蛋糕',
},
],
},
],
},
{
id: '中式面点',
label: '中式面点',
children: [{
id: '馒头',
label: '馒头',
children: [{
id: '白面馒头',
label: '白面馒头',
},
{
id: '玉米窝头',
label: '玉米窝头',
},
],
},
{
id: '包子',
label: '包子',
children: [{
id: '素包',
label: '素包',
},
{
id: '肉包',
label: '肉包',
},
{
id: '水煎包',
label: '水煎包',
},
],
},
{
id: '水饺',
label: '水饺',
children: [{
id: '素水饺',
label: '素水饺',
},
{
id: '肉水饺',
label: '肉水饺',
},
{
id: '海鲜水饺',
label: '海鲜水饺',
},
],
},
{
id: '面条',
label: '面条',
children: [{
id: '牛肉面',
label: '牛肉面',
},
{
id: '刀削面',
label: '刀削面',
},
{
id: '拉面',
label: '拉面',
},
{
id: '手擀面',
label: '手擀面',
},
],
},
],
},
{
id: '凉菜',
label: '凉菜',
children: [{
id: '凉拌荤菜',
label: '凉拌荤菜',
},
{
id: '凉拌素菜',
label: '凉拌素菜',
},
],
},
{
id: '卤货',
label: '卤货',
children: [{
id: '卤下水',
label: '卤下水',
},
{
id: '卤鸡鸭鹅',
label: '卤鸡鸭鹅',
},
{
id: '卤海鲜',
label: '卤海鲜',
}
]
}
]
未转换前,el-tree-select运行不正常,故采用如下代码将其中”id"全部转化为”value“
function replaceIdWithValue(obj) {
if (typeof obj !== 'object' || obj === null) return obj;
if (Array.isArray(obj)) {
return obj.map(item => replaceIdWithValue(item));
}
const newObj = {};
for (const key in obj) {
const newKey = key === 'id' ? 'value' : key;
newObj[newKey] = replaceIdWithValue(obj[key]);
}
return newObj;
}
var url = 'Goods/GetGoodsSortDef';
const res = await request.get(url);
if (res.IsSuccess) {
const data = JSON.parse(res.Data);
const updatedData = replaceIdWithValue(data);
sortTreeData.value = updatedData;
}
转换后,el-tree-select运行正常。
备注:未替换前,DeepSeek曾建议修改:props
const sortProps = {
value: ‘id’,
label: ‘label’,
children: ‘children’
};
但是没起作用。