需求:el-table表格复选框限制只能选中一条。
具体代码实现如下:
<template><el-table ref="tableRef" :data="tableData" border @selection-change="handleSelectionChange" header-cell-class-name="headerCellClass"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /></el-table>
</template><script setup>
let selectData = ref([]);
const tableRef = ref({});
const handleSelectionChange = (select) => {if(select.length > 1) {// 清除所有勾选框tableRef.value.clearSelection();selectData.value = select.pop();// 勾选当前选中的数据tableRef.value.toggleRowSelection(selectData.value, true)}
}
</script>
去掉表头全选勾选框
给el-table绑定类名:header-cell-class-name=“headerCellClass”
:deep(.headerCellClass){.el-checkbox{display: none;}
}