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

基础效果

其实在element ui里面已经实现了el-select的多选效果

主要是multiple属性，另外collapse-tags可以将他们合并成一段文字

但是这样的效果做不到可以全选

全选效果

下面是代码

页面部分

		<el-form-item label="可全选下拉框" prop="apply">
            <el-select multiple collapse-tags v-model="ruleForm.apply" @change="changeSelect" placeholder="请选择应用" style="width:100%">
              <el-checkbox v-model="allCheck" @change="selectAll" style="margin-left:10px;padding:5px 0">全选</el-checkbox>
              <el-option
                v-for="(item, index) in appOptions"
                :label="item.label"
                :value="item.code"
                :key="index"
              />
            </el-select>
          </el-form-item>

页面部分主要是添加了一个checkbox用于全选
相关初值

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

相关方法

    /** 下拉框全选 */
    selectAll () {
      this.ruleForm.apply = []
      if (this.allCheck) {
        let tmpArr = []
        this.appOptions.forEach((item) => {
          tmpArr.push(item.code)
        })
        this.ruleForm.apply = tmpArr
      } else {
        this.ruleForm.apply = []
      }
    },
    /** 切换全选状态 */
    changeSelect (val) {
      if (val.length === this.appOptions.length) {
        this.allCheck = true
      } else {
        this.allCheck = false
      }
    }
  }

通过切换checkbox的allcheck将选项推入数组然后进行赋值
select绑定change方法，通过选中的选项长度是否与默认长度一致判断是否进行了全选，实现效果