表格点击触发整行 加对钩显示

80 阅读1分钟

效果图展示:

image.png

在表格头部

image.png

在表格的最后

image.png

这里根据自己的实际情况进行切换变量

<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>

点击触发的事件 进行赋值操作

image.png

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;
}