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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值