已知:
let array = [
['name1','18'],
['name2','30'],
['name1','32'],
['name2','32'],
['name3','20'],
]
所求:
array = [
['name1','32'],
['name2','32'],
['name3','20'],
]
需求是:多选的级联操作,第一层多选,第二层单选;
逻辑是:判断二维数据内的第一项不能重复,如果第一项name重复,就保留靠后的age,删掉前项重复的数组;
补充代码
html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<div class="block">
<span class="demonstration">默认显示所有Tag</span>
<el-cascader
v-model="dataInfo"
@change="cascaderChange"
:options="options"
:props="props"
clearable></el-cascader>
</div>
</div>
css
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
js
var Main = {
data() {
return {
dataInfo:[],
props: { multiple: true },
options: [{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海'
}, {
value: 7,
label: '江苏',
}, {
value: 12,
label: '浙江',
}]
}, {
value: 17,
label: '西北',
children: [{
value: 18,
label: '陕西',
}, {
value: 21,
label: '新疆维吾尔族自治区',
}]
}]
};
},
methods: {
cascaderChange(value) {
console.log(value,'value');
let newVal = [...new Map(value)]
console.log(newVal,'newVal');
console.log(this.dataInfo,'this.dataInfo');
this.dataInfo = newVal
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
在线编辑器:https://codepen.io/pen/,复制可用