el-table的复选框占满全格

el-table的复选框格子很小每次点击都点不到，又不想设置行点击，因为每次复制内容都会选中，实现效果是点击el-table的复选框单元格就可以选中

<template>
	<div style="width: 60vw; margin: 10px;">
		<el-table :data="state.tableData" ref="multipleTableRef" @selection-change="handleSelectionChange" border>
			<el-table-column type="selection" width="55" :class-name="'all-selection'" />
			<el-table-column type="index" label="序号" width="55" align="center" fixed />
            // 如果某一行的内容超出的话添加超出省略 show-overflow-tooltip 或者增大复选框的高度
			<el-table-column label="姓名" prop="name" align="center" show-overflow-tooltip/>
			<el-table-column label="年龄" prop="age" align="center" />
		</el-table>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
// 表格ref
const multipleTableRef = ref();
// 存放选中数据
const multipleSelection = ref();

const state = reactive({
	tableData: [
		{
			name: '张三',
			age: 1,
		},
		{
			name: '张四',
			age: 2,
		},
		{
			name: '张五',
			age: 3,
		},
	],
});

onMounted(() => {});

// 选中的回调
const handleSelectionChange = (val) => {
	multipleSelection.value = val;
};
</script>

<style scoped lang="scss">
:deep(.el-table__body) {
	.all-selection {
		.cell {
			// 宽度设置满格
			width: 100%;
			// 去掉原有的padding
			padding: 0;
			// 这个是关键，height需要设置为你表格里最大高度
			height: 40px;

			.el-checkbox {
				height: 100%;
				width: 100%;
				padding-left: 10px;
			}
		}
	}
}
</style>