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'
        }
      ],

View Code