vue element 的el-checkbox-group默认全部选中

<!--标注选择标签弹层组件-->
<template><div class="message-box dialog-mask"><div class="dialog-content"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><div class="dialog-body"><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="(city,index) in labels" :label="city.name" :key="index">{{city.name}}<span class="spanClo" :style="{'background-color':city.color}"></span></el-checkbox></el-checkbox-group></div><footer class="text-but"><el-button class="dialog-content1" type="text" size="mini" @click="$close(false)">取消</el-button><el-button class="dialog-content1" type="text" size="mini" @click="labelDetermine">确定</el-button></footer></div></div>
</template>
<script>export default {data() {return {checkAll: false,checkedCities: ['小泡状', '上海'],allElection: [], // 全选selectionArr: [], // 选中要传给后台的数据 对象isIndeterminate: true}},props: {labels: Array,},mounted() {this.allElectionFun();this.DefaultFullSelection();},methods: {async labelDetermine() {// if (code == 0) {console.log(this.selectionArr);this.$close(this.selectionArr)// } else if (code == 1) {//     this.$message({//         message: msg,//         type: "warning",//         duration: 1200//     });// }},DefaultFullSelection(){ // 初始化 默认全部选中this.checkedCities = this.allElection;let checkedCount = this.checkedCities.length;this.checkAll = checkedCount === this.labels.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;this.selectionFun(this.checkedCities);},allElectionFun() { // 全选数组this.allElection = [];for (var i = 0; i < this.labels.length; i++) {this.allElection.push(this.labels[i].name)}},selectionFun(selectionArr) { // 获取选中的对象this.selectionArr = [];for (var i = 0; i < this.labels.length; i++) {for (var j = 0; j < selectionArr.length; j++) {if (selectionArr[j] === this.labels[i].name) {this.selectionArr.push(this.labels[i])}}}},handleCheckAllChange(val) { // 全选this.allElectionFun();this.checkedCities = val ? this.allElection : [];this.isIndeterminate = false;// console.log(this.checkedCities);this.selectionFun(this.checkedCities);console.log(this.selectionArr)},handleCheckedCitiesChange(value) { // 选中let checkedCount = value.length;this.checkAll = checkedCount === this.labels.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;this.selectionFun(value);console.log(this.selectionArr)}}}
</script><style scoped>.message-box {position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;background-color: rgba(0, 0, 0, .33);z-index: 10;}.dialog-content {width: 500px;height: 340px;margin: auto;padding: 20px;background-color: white;}.dialog-body {width: 100%;height: 68%;margin: 10px;overflow: auto;}.text-but {text-align: center;}.dialog-content1 {display: inline-block;width: 100px;height: 40px;border-radius: 4px;background: #0071fe;font-size: 18px;color: #fff;margin: 16px 70px 20px;}.spanClo {width: 30px;height: 10px;display: inline-block;margin: 16px 0 0 6px;}
</style>
<style></style>

vue element 的el-checkbox-group默认全部选中相关推荐

Vue 实现图片在循环中默认和选中之间的点击切换
Vue 实现图片在循环中默认和选中之间的点击切换 html <ul style="font-size:20px;"><li:key="lesso ...
前端学习（3025）：vue+element今日头条管理-关于默认子路由的问题
前端学习（3024）：vue+element今日头条管理-关于默认子路由的问题
vue+element 表格中全选与清除选中
表格中添加事件@selection-change (回调参数为选中的选项) 事件名说明参数 select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row s ...
vue element ui 获取,判断复选框选中的值
<el-form-item label="某某字段"><el-checkbox-group v-model="form.字段名">< ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...

vue element 的el-checkbox-group默认全部选中

vue element 的el-checkbox-group默认全部选中相关推荐

最新文章

热门文章