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>

  

posted @ 2020-09-16 18:14  蛋Mrs炒饭  阅读(1902)  评论(0编辑  收藏  举报