前端基础学习-select下拉框实现多选、全选（二）

这一篇在上文的基础上继续添加另一种全选的方法
总体方法类似
这里直接上效果


初始默认全选

上代码

html

          <el-form-item label="可全选下拉框2" prop="apply2">
            <el-select multiple collapse-tags v-model="ruleForm.apply2" @change="changeSelectApp(ruleForm.apply2,appOptions)" @remove-tag="removeTagApp(ruleForm.apply2,appOptions)" placeholder="请选择应用" style="width:100%">
              <el-option label="全部" value="allSelect" @click.native="doSelecAllApp(ruleForm.apply2,appOptions)"></el-option>
              <el-option
                v-for="(item, index) in appOptions"
                :label="item.label"
                :value="item.code"
                :key="index"
              />
            </el-select>
          </el-form-item>

初值

     appOptions: [
        { code: 'No1', value: '01' },
        { code: 'No2', value: '02' },
        { code: 'No3', value: '03' },
        { code: 'No4', value: '04' },
        { code: 'No5', value: '05' }
      ],
      ruleForm: {
      	apply2: [],
      }

js
这里的方法我封了一层公共方法，为的是可以多次调用

    /** 切换全选状态 */
    changeSelect2 (valArr, options) {
      console.log(valArr, 'value11')
      console.log(options, 'options')
      if (!valArr.includes('allSelect') && valArr.length === options.length) {
        valArr.unshift('allSelect')
      } else if (valArr.includes('allSelect') && (valArr.length - 1) < options.length) {
        valArr = valArr.filter(item => {
          return item !== 'allSelect'
        })
      }
      return valArr
    },
    /** 移除tag */
    removeTag (valArr, options) {
      // console.log(valArr, '移除')
      // if (valArr === 'allSelect') {
      //   valArr = []
      // }
      // return valArr
    },
    /** 具体方法 */
    /** 获取所有select的全选 */
    getAllSelect () {
      this.doSelecAllApp(this.ruleForm.apply2, this.appOptions)
    },
    changeSelectApp (valArr, options) {
      this.ruleForm.apply2 = this.changeSelect2(valArr, options)
    },
    doSelecAllApp (valArr, options) {
      this.ruleForm.apply2 = this.doSelecAll2(valArr, options)
    },
    removeTagApp (valArr, options) {
      this.ruleForm.apply2 = this.removeTag(valArr, options)
    }

这里的getAllSelect方法是为了方便直接调用了doSelecAllApp方法，为了在初始时是“全部”的状态（mounted调用，这里省了）