vue引用的Element 组件多选框与项目实例的结合

一。第一步：引用组件

 <el-checkbox-group
        class="el-checkbox-group"
        v-model="checkList"
        :min="0"
        :max="9"
      >
        <el-checkbox
          class="el-checkbox"
          v-for="(val, key) in items"
          :key="key"
          :label="key"
          >{{ `${key} ` + "半球" }}
          <span v-if="checkList.indexOf(key) !== -1" id="stateon">{{
            status
          }}</span>
          <span v-else id="stateoff">{{ statusoff }}</span></el-checkbox
        >
      </el-checkbox-group>

注意点：v-model在组件中起重要作用，本项目例子需要循环出多个数据，并且数据来源相同。组件官网中介绍到checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。所以我们需要先给他在return中实例化的数组 checkList: [ ]
:key作用
1.跟踪每个节点的元素，方便重用或重新排序当前元素。

2.要求：元素必须有的且唯一不变。
label :选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
"checkList.indexOf(key) !== -1"------>通过indexOf来判断字符串中是否存在选中的key值，选中checkList里面就有了key值，取消选中就没有。借此判断在线状态或者离线状态。
二。第二步：写勾选组件框后触发的内容

 <span v-if="showPic" class="fapic">
      <span v-for="(val, key) in checkList" :key="key" class="picture">
        {{ val }}
      </span>
    </span>

该步骤首先通过v-if判断是否展示整个组件框，在reutrn里面先设定showPic：false；路由判断中在进行判断

 $route(to, from) {
      const num = this.$route.query.id
      if (num == 'one') {
        this.items = this.items1           ----------------数据的动态变换
        this.showPic = true                 ----------------此处为判断
        console.log(items1)
      } else if (num == 'two') {
        this.items = this.items2
        this.showPic = true
      } else if (num == 'three') {
        this.items = this.items3
        this.showPic = true
      } else if (num == 'four') {
        this.items = this.items4
        this.showPic = true
      } else if (num == 'five') {
        this.items = this.items5
        this.showPic = true
      } else if (num == 'six') {
        this.items = this.items6
        this.showPic = true
      } else {
        this.items = this.tip
        this.showPic = false

**v-for="(val, key) in checkList" :key=“key”**即为勾选组件框后显示的盒子，key为数组下标值，val为数组内容。
效果展示图：监控设备列表为此功能实现效果