el-checkbox-group限制勾选数量

<template>
  <div class="videoSurveillance">
    <el-row :gutter="24">
      <el-col :span="4">
        <div class="videoSurveillance-left">
          <div class="videoSurveillance-left-header">视频监控div>
 
          <div class="videoSurveillance-left-check">
            <el-checkbox-group
              v-model="checkedArr"
              @change="handleCheckedChange"
            >
              <el-checkbox
                v-for="(item, index) in sourceArr"
                :label="item.name"
                :key="index"
              >
                <el-tooltip
                  overflow
                  class="item"
                  effect="dark"
                  :content="item.name"
                  placement="right"
                >
                  <div class="check-name">
                    {{ item.name }}
                  div>
                el-tooltip>
              el-checkbox>
            el-checkbox-group>
          div>
        div>
      el-col>
      <el-col :span="20">
        <div class="videoSurveillance-right">
          <div class="sourceBox">div>
        div>
      el-col>
    el-row>
  div>
template>
 
<script>
export default {
  name: "videoSurveillance",
  components: {},
  props: {},
  data() {
    return {
      sourceArr: [
        {
          name: "视频监控1",
          source: "",
        },
        {
          name: "视频监控2",
          source: "",
        },
        {
          name: "视频监控3",
          source: "",
        },
        {
          name: "视频监控4",
          source: "",
        },
        {
          name: "视频监控5",
          source: "",
        },
        {
          name: "视频监控6",
          source: "",
        },
        {
          name: "视频监控7",
          source: "",
        },
        {
          name: "视频监控8",
          source: "",
        },
        {
          name: "视频监控9",
          source: "",
        },
        {
          name: "视频监控10",
          source: "",
        },
      ],
      checkedArr: [],
      maxChecked: 7,
    };
  },
  methods: {
    handleCheckedChange(e) {
      if (e.length > this.maxChecked) {
        this.$message.warning(`最多只能选择${this.maxChecked - 1}个视频监控`);
        this.checkedArr = e.slice(e.length - this.maxChecked);
      }
      if (e.length === this.maxChecked && this.checkedArr.length === this.maxChecked) {
        this.$nextTick(() => {
          this.checkedArr = e.filter(item => item !== this.checkedArr[0]);
        });
      }
    },
  },
  created() {},
  mounted() {},
};
script>
 
<style lang="scss" scoped>
.videoSurveillance {
  background-color: #e9e9eb;
  width: 100%;
 
  &-left,
  &-right {
    height: calc(100vh - 132px - 2 * 20px) !important;
    background: #ffffff;
    border-radius: 4px;
  }
 
  &-left {
    box-shadow: 0 4px 10px 0 #dddddd;
 
    &-header {
      height: 30px;
      background: #1492ff;
      border-radius: 4px 4px 0 0;
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      line-height: 30px;
      letter-spacing: 1px;
      text-align: center;
    }
 
    &-check {
      height: calc(100% - 30px);
      padding: 10px 24px 20px;
      /*overflow-y: auto;*/
 
      .check-name {
        width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
 
  &-right {
    .sourceBox {
    }
  }
}
 
::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
 
::v-deep .el-checkbox {
  margin-top: 8px;
  display: flex;
}
style>