<!--标注选择标签弹层组件-->
<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默认全部选中
于 2019-11-19 14:10:49 首次发布