el-select 实现多选和全选

书中自有妍如玉

已于 2023-01-14 11:58:54 修改

阅读量861

点赞数 1

分类专栏：前端文章标签： vue.js elementui javascript

于 2023-01-14 11:54:46 首次发布

本文链接： https://blog.csdn.net/qq_26695613/article/details/128683648

版权

前端专栏收录该内容

134 篇文章 6 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中使用el-form-item和el-select组件创建一个多选下拉框，并添加全选功能。通过el-checkbox和v-model实现全选和取消全选的逻辑，同时利用computed属性处理选中状态的判断。

摘要由CSDN通过智能技术生成

多选

单选

全选

代码

<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 组件更合适。