vue之ele中el-checkbox-group复选框组件的使用
<!--
描述：
作者：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="" :key="">{{ 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>
// 弹窗组件 -> props参数 与事件
/**
* param -> 参数
*** @param visible {Boolean} - 弹窗显示与隐藏 默认false
* event -> 事件
*** @event changeDialog {Fun}} - 关闭事件
*** @event comfirmBtn {Fun}} - 保存事件
<Dialog
@changeDialog="changeDialog2"
@changeDialog="changeDialog"
>
*/
export default {
name: 'SetTeam',
components: {},
props: {
fatherCheckedId: {
type: Array,
default: () => {
return []
}
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
checkedId: [], // 选中的id值
List: [
{
value: 1,
label: '手机'
},
{
value: 2,
label: '电脑'
}
],
checkTypeList: []
}
},
watch: {
// 接受 父组件已经勾选的值 回显数据
fatherCheckedId: {
immediate: true,
handler(newV) {
// ('newV', newV)
this.checkedId = [...newV]
}
}
},
computed: {
// 计算 父组件传递来的 visible
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>