一、問題

element中的el-select的v-model一般都是字符串或者字符串數組，但是有些時候后端接口要求該字段要傳對象或者對象數組，如果再轉換一次數據，對于保存配置和回顯都是吃力不討好的事情。如下所示：

<template><el-selectmultipleclearablefilterablev-model="select"><el-optionv-for="item in options":key="item.nodeId":label="item.nodeName":value="item.nodeId"/></el-select>
</template>
<script>
export default {data() {return {select: [],options: [{"nodeId": "node_135061771075","nodeName": "審批人1"},{"nodeId": "node_404274216403","nodeName": "審批人2"}]}}
}
</script>

選中后的數據select為：

['node_135061771075', 'node_404274216403']

但是想實現的是select值為：

[{"nodeId": "node_135061771075","nodeName": "審批人1"},{"nodeId": "node_404274216403","nodeName": "審批人2"}
]

這時，如果把el-option的value改成item：

<el-optionv-for="item in options":key="item.nodeId":label="item.nodeName":value="item"
/>

結果發現竟然會報錯：

<transition-group> children must be keyed: <ElTag>

二、解決

指定el-select的value-key屬性。官網的說法：如果 Select 的綁定值為對象類型，請務必指定 value-key 作為它的唯一性標識。點擊【跳轉】訪問官網

<template><el-selectmultipleclearablefilterablevalue-key="nodeId"v-model="select"><el-optionv-for="item in options":key="item.nodeId":label="item.nodeName":value="item"/></el-select>
</template>
<script>
export default {data() {return {select: [],options: [{"nodeId": "node_135061771075","nodeName": "審批人1"},{"nodeId": "node_404274216403","nodeName": "審批人2"}]}}
}
</script>

el-select設置好value-key后，頁面不會報錯，而且數據也是返回如下正確格式：

[{"nodeId": "node_135061771075","nodeName": "審批人1"},{"nodeId": "node_404274216403","nodeName": "審批人2"}
]

三、最后

本人每篇文章都是一字一句碼出來，希望大佬們多提提意見。順手來個三連擊，點贊👍收藏💖關注?。打氣，加油?