vue学习记录：el-tree-select json对象替换键值名称

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’
};
但是没起作用。