vue库element-ui checkbox使用方式

本文详细讲解了如何在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也是可以的。不过全选反选的方法就需要自己写了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值