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>
// 弹窗组件 Dialog.vue -> 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) {
        // console.log('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>

• 效果