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 }}
        </el-checkbox>
      </el-checkbox-group>

data里的数据

listThematicChecked:[],
subjectList: [
        {
          menu: '辖区态势图',
          img: '/static/images/icon-tuli/tuli_xiaqutaishitu_icon.png',
          isCheck: 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,
          isqx: 0,
          type: 'sisetu'
        },
        {
          menu: '警情统计图',
          img: '/static/images/icon-tuli/tuli_jingqingtongji_icon.png',
          isCheck: false,
          isqx: 0,
          type: 'tongjitu'
        }
      ]

View Code

clickThematicMapItem(item, index) {
      //把多选做成单选的样式
      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.isqx = 0;
        }
      });
      let cname = item.menu;
      let nList = this.listThematicChecked.filter(word => word == cname);
      this.listThematicChecked = nList;
      this.$parent.leftNavType = '';
      this.leftCloseDio();
      switch (item.type) {
        //辖区态势
        case 'taishitu':
          if (check) {
            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.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.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.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) {
            SourceMirror.fourColortInfo().then(res => {
              console.log('四色', res);
            });
            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;
      }
    },

View Code