el-table表格基于el-radio单选框实现表格单选并修改为多选样式

el-table表格单选

<template>
	<div>
		<el-table class="table" ref="tb" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column width="60" label="单选" align="center">
				<template #default="{ row }">
					<el-radio class="radio" v-model="radio" :label="row.id" @click.native.prevent="clickDataType(row)">
					</el-radio>
				</template>
			</el-table-column>
			<el-table-column label="日期" width="120">
				<template slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio: '',
				tableData: [
					{
						id: '1',
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '2',
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '3',
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '4',
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '5',
						date: '2016-05-08',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '6',
						date: '2016-05-06',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						id: '7',
						date: '2016-05-07',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}
				],
				checkedId: []
			};
		},

		methods: {
			clickDataType(row) {
				// 处理再次点击取消选中
				this.radio = row.id === this.radio ? '' : row.id;
				// 已选中项的id
				let id = '';
				id = row.id != this.radio ? '' : row.id;
				console.log('已选中项的id=>', id);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.table ::v-deep {
		.el-radio.radio {
			.el-radio__input.is-checked {
				.el-radio__inner {
					border-radius: 16%;
					&::after {
						content: '';
						width: 10px;
						height: 6px;
						border: 2px solid white;
						border-top: transparent;
						border-right: transparent;
						text-align: center;
						display: block;
						position: absolute;
						top: 2px;
						left: 1px;
						-webkit-transform: rotate(-45deg);
						transform: rotate(-45deg);
						border-radius: 2px;
						background: none;
					}
				}
			}
			.el-radio-group {
				box-shadow: none;
			}
			.el-radio__inner {
				border-radius: 16%;
			}
			.el-radio__label {
				display: none;
			}
		}
		// 取消阴影
		.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
		}
	}
</style>