el-select 实现多选和全选

多选

单选

 全选

代码

<template>
 <el-form-item label="监测因子">
            <el-select
              v-model="queryform.selecteYz"
              multiple
              placeholder="请选择"
              collapse-tags
            >
              <el-checkbox
                v-model="check"
                class="m-l-20"
                :indeterminate="queryform.selecteYz.length !== YzList.length"
                @change="selectAll"
              >
                全选
              </el-checkbox>
              <el-option
                v-for="item in YzList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
</template>
<script>
data(){
    return {
    selecteYz: [],
    YzList: [
        { value: 'WTemp', label: '水温' },
        { value: 'pH', label: 'pH' },
        { value: 'Do', label: '溶解氧' },
        { value: 'CodMn', label: '高锰酸盐指数' },
        { value: 'Bod5', label: '五日生化需氧量' },
        { value: 'Nh4N', label: '氨氮' },
        { value: 'PTotal', label: '总磷' },
        { value: 'NTotal', label: '总氮' },
        { value: 'Cu', label: '铜' },
        { value: 'Zn', label: '锌' },
        { value: 'F', label: '氟化物' },
        { value: 'Se', label: '硒' },
        { value: 'As', label: '砷' },
        { value: 'Hg', label: '汞' },
        { value: 'Cd', label: '镉' },
        { value: 'Cr6', label: '铬六价' },
        { value: 'Pb', label: '铅' },
        { value: 'VPhen', label: '挥发酚' },
        { value: 'CnTotal', label: '氰化物' },
        { value: 'Oils', label: '石油类' },
        { value: 'AnSaa', label: '阴离子表面活性剂' },
        { value: 'S', label: '硫化物' },
        { value: 'ColoOrg', label: '粪大肠菌群' },
        { value: 'So4', label: '硫酸盐' },
        { value: 'Cl', label: '氯化物' },
        { value: 'No3N', label: '硝酸盐' },
        { value: 'WFe', label: '铁' },
        { value: 'Mn', label: '锰' },
      ],    
    }
},
methods:{
    selectAll(checked) {
      if (checked) {
        this.queryform.selecteYz = []
        this.YzList.forEach((item) => {
          this.queryform.selecteYz.push(item.value)
        })
      } else {
        this.queryform.selecteYz = []
      }
    }
},
 computed: {
    check: {
      get () {
        if (this.queryform.selecteYz.length === this.YzList.length) {
          return true
        }
        return false
      },
      set () {}
    }
  },

</script>

不过说说回来，还是推荐使用el-cascader 组件更合适。