vue效果之改element的el-checkbox-group多選框組為單選可取消的單選框(樣式還是多選框的樣式)

vue

<el-checkbox-group v-model="listThematicChecked">
        <el-checkbox v-for="(item , index) in subjectList" @change="clickThematicMapItem(item,index)" :key="item.menu" :label="item.menu" :disabled="item.menu === '責任區' && disabledZeRenQu">
          <img :src="item.img" alt="" />&nbsp;&nbsp;{{ item.menu }}
          <em class="four-more-em" v-show="item.menu == '轄區態勢圖' || item.menu == '四色預警圖'" @click.prevent="fourClick(item)">...</em>
        </el-checkbox>
      </el-checkbox-group>

data里的數據

listThematicChecked: [],
subjectList: [
        {
          menu: '轄區態勢圖',
          img: '/static/images/icon-tuli/tuli_xiaqutaishitu_icon.png',
          isCheck: false,
          fourMoreEm: false,
          isqx: 0,
          type: 'taishitu'
        },
        {
          menu: '警力熱力圖',
          img: '/static/images/icon-tuli/tuli_relitu_icon.png',
          isCheck: false,
          isqx: 0,
          type: 'relitu'
        },
        {
          menu: '警情熱力圖',
          img: '/static/images/icon-tuli/tuli_relitu_icon.png',
          isCheck: false,
          isqx: 0,
          type: 'jingqingtu'
        },
        {
          menu: '四色預警圖',
          img: '/static/images/icon-tuli/tuli_siseyujingtu_icon.png',
          isCheck: false,
          fourMoreEm: false, //4色預警后三個點
          isqx: 0,
          type: 'sisetu'
        },
        {
          menu: '警情統計圖',
          img: '/static/images/icon-tuli/tuli_jingqingtongji_icon.png',
          isCheck: false,
          isqx: 0,
          type: 'tongjitu'
        }
      ],

 

clickThematicMapItem(item, index) {
      console.log('367', item);
      //把多選做成單選的樣式
      let check = null;
      this.subjectList.forEach(res => {
        if (res.menu == item.menu) {
          res.isCheck = true;
          res.isqx += 1;
          //2為同一個的取消，1為同一個的選中
          if (res.isqx == 2) {
            res.isqx = 0;
            check = false;
          } else if (res.isqx == 1) {
            check = true;
          }
        } else {
          res.isCheck = false;
          res.isqx = 0;
        }
      });
      let cname = item.menu;
      console.log('387', this.listThematicChecked);
      //return;
      let nList = this.listThematicChecked.filter(word => word == cname);
      this.listThematicChecked = nList;
      console.log('389', this.listThematicChecked);//過濾成當前勾選框只能勾選一個
      this.$parent.leftNavType = '';
      this.leftCloseDio();
      switch (item.type) {
        //轄區態勢
        case 'taishitu':
          if (check) {
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.readTsFeatures(tsData, 'taishitu');
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
          } else {
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
          }
          break;
        //警力熱力
        case 'relitu':
          if (check) {
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.readJqHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
          } else {
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
          }
          break;

        //警情熱力
        case 'jingqingtu':
          if (check) {
            // this.$parent.leftNavType = '';
            // this.leftCloseDio();
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.readJqHotFeatures('jingqingtu');
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
          } else {
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
          }
          break;
        //預警統計態勢
        case 'tongjitu':
          if (check) {
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.readTsFeatures(tsData, 'tongjitu');
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
          } else {
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
          }
          break;
        //四色
        case 'sisetu':
          if (check) {
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.readTsFeatures(tsData, 'sisetu');
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
          } else {
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
          }
          break;
      }
    },

 

后面...的點擊效果，如果當前為勾選狀態，點擊...為切換另外一種區域圖，再點擊就是切換到勾選的那個區域圖

  fourClick(data, fourMoreEm) {
      console.log('259', this.subjectList);
      if (data.isCheck === true) {
        console.log(data);
        switch (data.type) {
          //轄區態勢
          case 'taishitu':
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            // this.subjectList[3].isCheck = false;
            // this.subjectList[0].isCheck = true;
            if (data.fourMoreEm === false) {
              this.$parent.$refs.dsMap.readTsFeatures(allData, 'taishitu');
            } else {
              this.$parent.$refs.dsMap.readTsFeatures(tsData, 'taishitu');
            }
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');

            break;
          //四色
          case 'sisetu':
            this.$parent.$refs.dsMap.clearTrailLine();
            this.$parent.$refs.dsMap.clearFeatures('sisetu');
            // this.subjectList[0].isCheck = false;
            // this.subjectList[3].isCheck = true;
            if (data.fourMoreEm === false) {
              this.$parent.$refs.dsMap.readTsFeatures(allData, 'sisetu');
            } else {
              this.$parent.$refs.dsMap.readTsFeatures(tsData, 'sisetu');
            }
            this.$parent.$refs.dsMap.clearFeatures('taishitu');
            this.$parent.$refs.dsMap.clearFeatures('tongjitu');
            this.$parent.$refs.dsMap.clearHotFeatures('relitu');
            this.$parent.$refs.dsMap.clearHotFeatures('jingqingtu');
            break;
        }
        data.fourMoreEm = !data.fourMoreEm;
      } else {
        console.log('我是f');
      }
    },

 

思路解析：

點擊多選組件,

1>當前點擊的這個對象和整個原始list去匹配，如果相同則讓當前計數器isqx 加1,以及狀態isCheck為true代表被選中;否則就是else里面的;

2>當相同的一個再點擊一次，代表的是這個多選取消的效果，這個時候，計數器isqx加了1后就是2;然后走進判斷

if (res.isqx == 2) {
            res.isqx = 0;
            check = false;
          } else if (res.isqx == 1) {
            check = true;
          }

然后用check去判斷到底是取消還是選上的狀態;