vue 使用input写复选框

<div class="box">

      <div class="data_list" v-for="(item,index) in roleAllData" :key="index">

        <input type="checkbox" class="check_box tui-checkbox" :id="item" :value="item" v-model="selRoleData">

        <label :for="item" class="title">{{item.name}}</label >

      </div>

    </div>

    <x-button type="primary" @click.native="submitRole" style="background-color: #3e81cd; width:310px;">确定</x-button>

 

样式：

.box {

  padding: 20px 0 30px 35px;

}

.data_list{

  align-content: center;

  display: inline-block;

  width: 165px;

  height: 30px;

}

.tui-checkbox:checked {

  background: #1673ff;

  border: solid 1px #1673ff;

}

.tui-checkbox {

  width: 18px;

  height:18px;

  background-color: #ffffff;

  border: solid 1px #dddddd;

  font-size: 18rem;

  padding-top: 8px;

  margin: 3px;

  position: relative;

  display: inline-block;

  vertical-align: top;

  /* cursor: default; */

  -webkit-appearance: none;

  -webkit-user-select: none;

  user-select: none;

  -webkit-transition: background-color ease 0.6s;

  transition: background-color ease 0.6s;

}

.tui-checkbox:checked::after {

  content: '';

  top: 0.1rem;

  left: 0.09rem;

  position: absolute;

  background: transparent;

  border: #fff solid 2px;

  border-top: none;

  border-right: none;

  height: 5px;

  width: 13px;

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}