全选全不选

新老农

已于 2024-03-20 13:57:59 修改

阅读量203

点赞数 1

文章标签： windows

于 2024-03-13 15:05:15 首次发布

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/136679046

版权

在这里插入图片描述

<el-dialog title="新增编辑人员" :visible.sync="dialogCreateVisible" :close-on-click-modal="false" width="600px" top="12vh">
    <el-form :model="userForm" :rules="userRules" ref="userForm" :label-position="labelPosition" label-width="80px">
        <el-row :gutter="16">
            <el-form-item label="姓名" prop="user_id" :rules="userRules.strRequired">
                <el-select v-model="userForm.user_id" clearable filterable placeholder="请选择人员" style="width: 93%;">
                    <el-option
                            v-for="item in userList"
                            :key="item.userid"
                            :label="item.name"
                            :value="item.userid">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-row>

        <el-row :gutter="16">
            <el-form-item>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            </el-form-item>
            <el-form-item>
                <template>
                    <el-checkbox-group v-model="userForm.choose_id_data" @change="handleCheckedChange">
                        <el-checkbox v-for="item of aid_list" :label="item.value" :key="item.value"> [!!item.label !!] </el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-form-item>
        </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormSubmit('userForm')" :loading="loadingstatus" :disabled="is_dis">确 定</el-button>
        <el-button @click="dialogCreateVisible = false" >取 消</el-button>
    </div>
</el-dialog>

userList: [
    {"userid" => "231233","name" => "张三"},
    {"userid" => "343244","name" => "李四"}    
],
aid_list:[
    {'value': '1', 'label': '打板'},
    {'value': '2', 'label': '打样'},
    {'value': '3', 'label': '查看所有'},
    {'value': '4', 'label': '申请/确认'},
],
userForm:{
  'id' : null,
  'user_id' : null,
  'choose_id_data' : [],  //选中
},
checkAll: true,
isIndeterminate: true,

 /**
  * 全选与否
* */
handleCheckAllChange(val) {
   var that = this
   if(val){
      for(var i in that.aid_list){
        that.userForm.choose_id_data.push(that.aid_list[i]['value']);
      }
  }
  else{
      that.userForm.choose_id_data = [];
  }
  that.isIndeterminate = false;
},
            
handleCheckedChange(val) {
  var that = this
  let checkedCount = val.length;
  that.checkAll = checkedCount === that.aid_list.length;
  that.isIndeterminate = checkedCount > 0 && checkedCount < that.aid_list.length;
},