vue checkbox 全选操作

<el-form-item label="材料清单"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="**handleCheckAllChange**">全选</el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="addProForm.appFiles" @change="handleCheckedFilesChange"> <el-checkbox name="appFiles" v-for="file in selectFiles()" :label="file" :key="file">{{file}}</el-checkbox> </el-checkbox-group> </el-form-item>

handleCheckAllChange(val) { this.addProForm.appFiles = val ? this.selectFiles() : []; this.isIndeterminate = false;**** }, handleCheckedFilesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.selectFiles().length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.selectFiles().length; }, handleCheckAllChange(val)方法中的this.addProForm.appFiles必须与v-model="addProForm.appFiles"保持一致
this.selectFiles()与v-for="file in selectFiles()"保持一致

vue checkbox 全选操作

上一篇:Study03


下一篇:MSSQL 4表联查,子查询,函数统计,分组条件查询综合应用实例