Cascader 级联选择器与v-for缓存的问题

故事背景

前端要完成一个标签功能，要求标签由系统字典来动态预置，基本要求时标签不得重复

**所以，EleUI的级联选择器足以应付。**开搞~

遇到问题

**级联选择器的枚举值已由接口获取，**系统预置的标签类型姑且先配置两种，【状态】和【类型】

[	{	  value: "DocStatus",	  label: "状态",	  children: [		{		  value: "审核中",		  label: "审核中"		},		{		  value: "待关联",		  label: "待关联"		}	  ]
	},
	{
	  value: "DocType",
	  label: "类型",
	  children: [
		{
		  value: "需求文档",
		  label: "需求文档"
		},
		{
		  value: "开发文档",
		  label: "开发文档"
		},
		{
		  value: "测试文档",
		  label: "测试文档"
		}
	  ]
	}
]

一通操作过后，问题显现，校验标签重复时遇到问题，级联选择器的枚举值没有全部实时刷新，如下图所示：

解决问题

显然，通过新增按钮重新渲染的级联选择器里的重复标签禁用属性disabled是没问题的，但是旧的级联选择器里，还是用的【缓存】中的枚举值对象。

一般遇到这种问题，我都习惯性操作:key="item.value+index"，让v-for的key增加复杂度避免重复，可惜这次失效了，因为当点击“新增”按钮时，v-for循环开始重新渲染整个数组，item.value+index还是与之前保持一致，所以还是会走dom缓存。

那么问题的关键在于，使每次v-for渲染数组时，所有的key要保证不能与之前一致。所以改成

:key="item.value+Math.random()"

在我这个需求场景下，强制所有v-for不走dom缓存，问题解决~

codepen地址：codepen.io/goodrick/pe…