需求分析
同事写项目的时候遇到这样一个问题，写一个下拉框框的时候，是一个简单的级联的下拉框，所谓的级联的就是后一个下拉框的值是根据前一个不同的选择得到的，其实这个呢很简单，就是前面的select点击的时候触发一个函数，将点击的value给后端，拿到返回的obj赋值到后一个select里面就可以了，一般都是这么做的，我们也是，但是这次是第一个下拉框下面四个值，前三个点击以后返回的数据格式都是一样的，最后一个是不一样的，那么我们后一个select渲染的时候就不行了，因为element组件的option是不可以在select里面做v-if判断的，所以这时候就比较棘手了，那么这个时候就需要重写最后一个值的返回数据了，重写为和前三个一样的格式就可以了，这也是今天我会写的。
场景再现
代码语言：javascript复制<!DOCTYPE html>
<html>
<!--
@author ClearLove
@aim implate array overwrite
@date 04-03
-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let data_origin = [{
name: "tom"
}, {
name: "jim"
}, {
name: "jim"
}, {
name: "mary"
}, {
name: "kim"
}, {
name: "tony"
}, {
name: "jerry"
}];
let data_copy = [];
window.onload = function() {
data_copy = data_origin.map((res, index) => {
return {
nick_name: res.name,
}
})
/**
* @data_origin 原数组
* @data_copy 新数组
*/
console.info(data_origin);
console.info(data_copy);
}
</script>
</body>
</html> 打印结果
原数组
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "tom"}
1: {name: "jim"}
2: {name: "jim"}
3: {name: "mary"}
4: {name: "kim"}
5: {name: "tony"}
6: {name: "jerry"}
length: 7
__proto__: Array(0)
新数组
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {nick_name: "tom"}
1: {nick_name: "jim"}
2: {nick_name: "jim"}
3: {nick_name: "mary"}
4: {nick_name: "kim"}
5: {nick_name: "tony"}
6: {nick_name: "jerry"}
length: 7
__proto__: Array(0)这里说明一下，我没有贴源码，直接用的是Hb写的一个简单的原理，写法都是一样的。
