vue之ele中el-checkbox-group复选框组件的使用
Home.vue
<!--
描述：
作者：xzl
时间：05月05日160944
-->
<template>
<div>
<div>checkedId - {
{
checkedId }}</div>
<el-checkbox-group v-model="checkedId" @change="handleChecked">
<el-checkbox v-for="item in List" :label="item.value" :key="item.value">{
{
item.label }}</el-checkbox>
</el-checkbox-group>
<button @click="setTeam">班组设置</button>
<SetTeam :visible="teamShow" v-if="teamShow" :fatherCheckedId="checkedId" @changeDialog="changeDialog" @comfirmBtn="comfirmBtn"></SetTeam>
</div>
</template>
<script>
import SetTeam from './SetTeam.vue'
export default {
name: 'Home',
components: {
SetTeam
},
data() {
return {
teamShow: false,
checkedId: [],
List: [
{
value: 1,
label: '手机'
},
{
value: 2,
label: '电脑'
},
{
value: 3,
label: '飞机'
}
]
}
},
methods: {
setTeam() {
this.teamShow = true
},
changeDialog(flag) {
this.teamShow = flag
},
comfirmBtn(flag, arr) {
this.teamShow = flag
console.log('点击确定arr', arr)
this.checkedId = [...arr]
},
handleChecked(item) {
console.log('item', item)
}
}
}
</script>
<style lang="scss" scoped></style>
SetTeam.vue
<!--
描述：
作者：xzl
时间：05月05日162109
-->
<!-- 弹窗组件 Dialog.vue -->
<template>
<el-dialog class="dialog-wrap" :visible.sync="dialogVisible">
<div>
<div>checkedId - {
{
checkedId }}</div>
<el-checkbox-group v-model="checkedId" @change="handleChecked">
<el-checkbox v-for="item in List" :label="item.value" :key="item.value">{
{
item.label }}</el-checkbox>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="comfirmBtn" class="comfirmBtn">
确 定
</el-button>
<el-button @click="dialogVisible = false" class="cancalBtn">
取 消
</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'SetTeam',
components: {
},
props: {
fatherCheckedId: {
type: Array,
default: () => {
return []
}
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
checkedId: [],
List: [
{
value: 1,
label: '手机'
},
{
value: 2,
label: '电脑'
}
],
checkTypeList: []
}
},
watch: {
fatherCheckedId: {
immediate: true,
handler(newV) {
this.checkedId = [...newV]
}
}
},
computed: {
dialogVisible: {
get() {
return this.visible
},
set(value) {
this.$emit('changeDialog', value)
}
}
},
methods: {
comfirmBtn() {
this.$emit('comfirmBtn', false, this.checkedId)
},
handleChecked(item) {
console.log('item', item)
}
}
}
</script>
<style lang="scss" scoped>
.dialog-wrap {
::v-deep .el-dialog__header {
height: 32px;
line-height: 32px;
padding: 0 15px;
border-bottom: 1px solid #e5e5e5;
.el-dialog__title {
font-size: 16px;
line-height: 32px;
font-weight: 700;
}
.el-dialog__headerbtn {
top: 10px;
cursor: pointer;
}
}
::v-deep .el-dialog__body {
padding: 10px 15px;
}
::v-deep .el-dialog__footer {
padding: 1px 15px;
height: 40px;
line-height: 40px;
.dialog-footer {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
.el-button {
padding: 6px 12px;
}
}
}
}
</style>
- 效果
