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;
// 设置绝对定位
position: absolute;
height: 100%;
top: 0;
.el-checkbox {
height: 100%;
width: 100%;
padding-left: 10px;
}
}
}
}
</style>
更新~:使用绝对定位可以更加智能化的跟随父元素单元格高度