vue库element-ui checkbox使用方式

最新推荐文章于 2025-06-18 11:30:09 发布

原创最新推荐文章于 2025-06-18 11:30:09 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

随笔

10 篇文章

订阅专栏

本文详细讲解了如何在Element-UI中高效利用el-checkbox的indeterminate状态，并探讨了去除el-checkbox-group的便捷方法，以及处理复杂数据格式的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了这么久的element-ui库，一直没有做小结，借此机会慢慢深入。

今天这里主要讲述一下el-checkbox群的使用方式。

借element-ui官方checkbox中的demo：indeterminate 状态

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

之前看到这个全选反选的总觉得有点啰嗦，因为外面套了一层el-checkbox-group标签。

先说下他的缺点：当参数形式为[{},{}]，需要二次加工处理。

这时候接口出来的全部数据需要单独加工之后赋值给cityOptions；

举例说明：如下

//data中定义的数据
//出参 
dataList:[
          {
            id:1,
            flowName:"测试1"
          },{
            id:2,
            flowName:"测试2" 
          }

],

//已选值
checkedLists:[1],
//二次接收dataList
checkedMiddle:[],

//标签组件使用：
<!-- 全选标签 -->
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

<!-- 多选项标签 -->
<el-checkbox-group v-model="checkedLists" @change="handleCheckedObjChange">
   <el-checkbox v-for="dataObj in dataList" :label="dataObj.id" :key="dataObj.id" > 
   </el-checkbox>
</el-checkbox-group>

//create执行
created() {
    this.checkedMiddle = this.dataList.map(item => {
        return item.id
    })
    console.log(this.checkedMiddle,"打印试试")
},

//method方法
methods: {

      //全选
      handleCheckAllChange(val){
        this.checkedLists = val ? this.checkedMiddle : [];
        this.isIndeterminate = false;
      },
}

上面举例中的：变量checkedMiddle相当于官方demo中的cityOptions

需要注意：el-checkbox标签中的:label="dataObj.id" 要和<el-checkbox-group>v-model绑定的数据形式是一致的。

<el-checkbox v-for="dataObj in dataList" :label="dataObj.id" :key="dataObj.id" >
</el-checkbox>

所以同学们使用的时候觉得不方便，也可以去掉el-checkbox-group。直接用el-chekbox也是可以的。不过全选反选的方法就需要自己写了。