Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

使用js数组去重操作!

已知:

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/,复制可用


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
[...new Map([
    ['name1','18'],
    ['name2','30'],
    ['name1','32'],
    ['name2','32'],
    ['name3','20'],
])]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...