效果图展示:
在表格头部
在表格的最后
这里根据自己的实际情况进行切换变量
<el-table-column
align="center"
label="操作"
prop="sync_time"
width="200"
header-align="center"
>
<template #default="{ row }">
<div class="talent-radio">
<el-radio
v-model="radioTalent"
:label="row.douyinUid"
style="transform: translateX(6px)"
@change="talentRadioChange(row)"
>
{{ ' ' }}
</el-radio>
</div>
</template>
</el-table-column>
点击触发的事件 进行赋值操作
css中样式
/* 选中某行时的背景色*/
::v-deep .el-table__body tr.current-row > td {
color: #28a458;
background: #e6f3ff !important;
}
::v-deep .talent-radio .el-radio__input.is-checked .el-radio__inner::after {
content: '';
width: 20px;
height: 10px;
border: 3px solid #1b90ff;
border-top: transparent;
border-right: transparent;
text-align: center;
display: inline-block;
position: absolute;
top: 24px;
left: -10px;
vertical-align: middle;
transform: rotate(-45deg);
border-radius: 0px;
background: none;
}
::v-deep .talent-radio .el-radio__inner {
width: 20px;
height: 20px;
background: transparent;
border: none;
}
.talent-radio {
width: 200px;
height: 70px;
}