vue結合element-ui 的select 全選問題

下拉列表多選 問題

通過操作 所有來進行全選 全不選問題

element-ui 中 select

記錄下自己最近使用element-ui 中的 select多選問題
在element中默認是指單純多選，但是公司要求，需要有一個控制選擇多選的值。測試許久終於整出來，特意記錄一下

思路

• element 中的組件

<template>
  <el-select v-model="value5" collapse-tags multiple placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>  

//數據
data() {
 return {
    options: [{
        value: '選項1',
        label: '黃金糕'
    }, {
        value: '選項2',
        label: '雙皮奶'
    }, {
        value: '選項3',
        label: '蚵仔煎'
    }, {
        value: '選項4',
        label: '龍須面'
    }, {
        value: '選項5', 
        label: '北京烤鴨'
    }],
    value5: []
 }
}    

• 默認是這樣的

// template
給el-select 添加 change事件 

//data 中添加 
oldOptions // 用來儲存上一次的數據

//methods
selectAll(val) {
    let allValues = []
    //保留所有值
    for (let item of this.options) {
        allValues.push(item.value)
    }

    // 用來儲存上一次的值，可以進行對比
    const oldVal = this.oldOptions.length === 1 ? [] : this.oldOptions[1]

    // 若是全部選擇
    if (val.includes('選項0')) this.value5 = allValues

    // 取消全部選中  上次有 當前沒有 表示取消全選
    if (oldVal.includes('選項0') && !val.includes('選項0')) this.value5 = []

    // 點擊非全部選中  需要排除全部選中 以及 當前點擊的選項 
    // 新老數據都有全部選中 
    if (oldVal.includes('選項0') && val.includes('選項0')) {
        const index = val.indexOf('選項0')
        val.splice(index, 1) // 排除全選選項
        this.value5 = val
    }

    //全選未選 但是其他選項全部選上 則全選選上 上次和當前 都沒有全選
    if (!oldVal.includes('選項0') && !val.includes('選項0')) {
        console.log(11)
        if (val.length === allValues.length - 1) this.value5 = ['選項0'].concat(val)
    }

    //儲存當前最后的結果 作為下次的老數據 
    this.oldOptions[1] = this.value5
}

• 最終效果