element——CheckBox复选框

最新推荐文章于 2024-06-12 08:00:00 发布

小曲曲

最新推荐文章于 2024-06-12 08:00:00 发布

阅读量406

点赞数

分类专栏： element vue 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43848576/article/details/128862118

版权

vue 同时被 2 个专栏收录

140 篇文章 3 订阅

订阅专栏

element

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

		<el-form-item label="选择提现月份"> 
          <el-card shadow="never">
            <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 border v-for="(item, i) in monthRecords" :label="item" :key="i">
                <div class="size-18 red">{{ item.drawMoneyAccount }}</div>
                <div>{{ item.yearMonth }}</div>
              </el-checkbox>
            </el-checkbox-group>
            <div class="blue mt-50 bold">当前金额总计：{{ total }}元</div>
          </el-card>
        </el-form-item>

      checkAll: false,  // 复选框状态
      checkedCities: [],  // 选中的数组
      monthRecords: [{  // 原始数组
        drawMoneyAccount: 900,
        yearMonth: "2022-01"
      }], 
      /**
       * 1、indeterminate 属性为  true，选择框均为半选状态 
       * 2、indeterminate 属性为  false 时，选择框样式以 checked 属性为主
       */
      isIndeterminate: false // 控制复选框的样式

 	// 全选月份
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.monthRecords : [];
      this.isIndeterminate = false;
    },
    // 单选
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.monthRecords.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.monthRecords.length;
    },
    // 弹窗关闭时恢复全选单选均为空白状态
 	resetForm() {
      this.$refs["ruleForm"].resetFields();
      this.checkedCities = [] // 清空选择
      this.isIndeterminate = false  // 初始化全选按钮样式为空
      this.checkAll = false  // 清空全选
    },