elementui table禁用全选,一次限制勾选一项。

1、设置属性:@selection-change="handleSelectionChange"

javascript 复制代码
<el-table
    :data="taskList"
    ref="tableDataRefs"
    @selection-change="handleSelectionChange"
    :header-cell-class-name="hideAllCheckbox"
  >
javascript 复制代码
function handleSelectionChange(selection) {
  if (selection.length > 1) {
    // 如果选择了多个,只保留最后一个
    selectedRow.value = selection[selection.length - 1];
    let del_row = selection.shift();
    // 其余的都不选中
    tableDataRefs.value.toggleRowSelection(del_row, false);
  } else {
    selectedRow.value = selection.length ? selection[0] : null;
  }
}

2、使用动态css 隐藏顶部全选框。添加属性::header-cell-class-name="hideAllCheckbox"

javascript 复制代码
function hideAllCheckbox({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) return "setDisable";
}
css 复制代码
<style lang="scss" scoped>
:deep(.setDisable) {
  .cell {
    visibility: hidden;
  }
}
</style>
相关推荐
zhuyan10833 分钟前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐1 小时前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound4861 小时前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla2 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
whuhewei4 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮4 小时前
supabase的webhook报错
开发语言·前端·javascript
qq_12084093714 小时前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
yivifu5 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡5 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能
IT_陈寒5 小时前
Redis批量删除的大坑,差点让我加班到天亮
前端·人工智能·后端