css3把radio样式修改成checkbox样式

今天，点击加载下一页时，需要在当前列表下面插入新数据，用el-table时插入的新数据会在table里面，加载下一页不能隐藏，所以用ul和li模拟了一个table，为了统一样式，操作栏需要把radio样式修改成checkbox样式，

					<div class="tableUl">
                        <ul class="clearfix">
                            <li class='fl' style="width:30%; text-align: center;">
                                操作
                            </li>
                            <li class='fl' style="width:30%; text-align: center;">
                                姓名
                            </li>
                            <li class='fl' style="width:30%; text-align: center;">
                                部门
                            </li>
                        </ul>
                        <ul class="clearfix" v-for="(item,index) in tableData" :key="index">
                            <li class='fl radio' style="width:30%; text-align: center;">
                                <input :id="'radio'+index" class="getAllId" type="radio" name="data" :value="item.name" onclick='radiofunction(document.querySelector("input[type=radio][name=data]:checked").value)'>
                                <label :for="'radio'+index" style="text-align: center;"></label>
                            </li>
                            <li class='fl ' style="width:30%; text-align: center;">
                                {{item.name}}
                            </li>
                            <li class='fl ' style="width:30%; text-align: center;">
                                {{item.address}}
                            </li>
                        </ul>
                        <div v-if="tableData.length > 0" style="text-align:center;margin:15px auto;">加载下一页</div>
                    </div>

.clearfix:after {
        content: ".";
        height: 0;
        display: block;
        visibility: hidden;
        clear: both
}

.clearfix {
        zoom: 1
 }
 
.fl {
        float: left
 }
 
.tableUl ul {
        margin: 0px;
        padding: 0px;
        border-bottom: solid 1px #EBEEF5;
}
    
.tableUl li {
        list-style: none;
        height: 45px;
        line-height: 45px;
}
    /*  */
    
.radio {
        position: relative;
        display: inline-block;
        margin-right: 12px;
}
    
    .radio input {
        width: 15px;
        height: 15px;
        appearance: none;
        /*清楚默认样式*/
        -webkit-appearance: none;
        opacity: 0;
        outline: none;
        z-index: 8;
        /*让input层级高于label，使之能选中*/
    }
    
    .radio label {
        position: absolute;
        left: 48%;
        top: 14px;
        width: 15px;
        height: 15px;
        border: 1px solid #DCDFE6;
    }
    
    .radio input:checked+label::before {
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        width: 15px;
        height: 15px;
        background: #409EFF;
        border: solid 1px #409EFF;
    }
    
    .radio input:checked+label::after {
        content: "";
        position: absolute;
        left: 4px;
        top: -1px;
        /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
        width: 5px;
        height: 12px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }
    /*  */