将element多选框变为单选框(学习篇)

--------- 使用情况：因为单选的按钮为圆角，样式有些情况不适用，想要多选的样式，单选的功能。要不就是修改样式，要不就是js。-----------

1、HTML部分

<div class="resource_box">
 	<div class="box" v-for="(item,index) in pathurlArray" :key="item.arId">
    	<input type="checkbox" :checked="checkout.resourceUuid == item.arId" @click="checkSel(item,httpUrl[index])" />
        <img :src="item.addressUrl" alt="图片错误">
        <p>{{item.dataTitleName}}</p>
    </div>
</div>
           

2、接口请求到的数据

3、在data中声明一个对象

checkout: {
        dnaCover: "",
        isliCode: "",
        resourceUuid: '',
   },
           

4、给html绑定点击事件，点击是给checkout赋值

// 多选框改变时
    checkSel(item, url) {
      this.checkout.dnaCover = item.addressUrl;
      this.checkout.isliCode = item.dataIdentifiers;
      this.checkout.resourceUuid = item.arId;
    },
           

5、css

.resource_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      .box {
        width: 188px;
        height: 170px;
        background: #f5f7f9;
        padding: 18px 8px;
        text-align: center;
        margin-top: 25px;
        position: relative;
        margin-left: 30px;
        img {
          width: 148px;
          height: 100px;
          object-fit: cover;
        }
        p {
          display: inline-block;
          width: 148px;
          overflow: hidden;
          height: 18px;
        }
        input[type="checkbox"] {
          position: absolute;
          top: 18px;
          left: 19.5px;
          width: 18px;
          height: 18px;
          border-radius: 0% 0%;
          cursor: pointer;
        }
      }
      .box:nth-child(1),
      :nth-child(5),
      :nth-child(9),
      :nth-child(13),
      :nth-child(17),
      :nth-child(21),
      :nth-child(25),
      :nth-child(29),
      :nth-child(33) {
        margin-left: 0px;
      }
    }
           

6、checked是多选框的是否选中属性，所以要绑定接口请求到的数据中唯一的不会重复的一个字段。我这里就绑定的是arId。