1. 程式人生 > 實用技巧 >element-ui select全選/取消全選

element-ui select全選/取消全選

    selectRoleCode(val) {
      const allValues = this.role.map(item => {
        return item.roleCode
      })
      // 用來儲存上一次選擇的值,可進行對比
      const oldVal = this.oldChooseData.length > 0 ? this.oldChooseData : []
      // 若選擇全部
      if (val.includes('00000000')) {
        this.chooseData = allValues
      }
      // 取消全部選中, 上次有, 當前沒有, 表示取消全選
      if (oldVal.includes('00000000') && !val.includes('00000000')) {
        this.chooseData = []
      }
      // 點選非全部選中,需要排除全部選中 以及 當前點選的選項
      // 新老資料都有全部選中
      if (oldVal.includes('00000000') && val.includes('00000000')) {
        const index = val.indexOf('00000000')
        val.splice(index, 1) // 排除全選選項
        this.chooseData = val
      }
      if (!val.includes('00000000') && !oldVal.includes('00000000')) {
        this.chooseData = val
      }
      // 全選未選,但是其他選項都全部選上了,則全選選上
      if (!oldVal.includes('00000000') && !val.includes('00000000')) {
        if (val.length === allValues.length - 1) {
          this.chooseData = ['00000000'].concat(val)
        }
      }
      // 儲存當前選擇的最後結果 作為下次的老資料
      this.oldChooseData = this.chooseData
      this.dashboard.roleCode = [...this.oldChooseData]
    },

  

<el-select v-model="dashboard.roleCode" @change="selectRoleCode" multiple collapse-tags placeholder="請選擇角色名稱" style="width: 145px;" size="mini">
    <el-option
       v-for="item in role"
       :key="item.id"
       :label="item.roleName"
       :value="item.roleCode">
    </el-option>
</el-select>