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>
相关推荐
程序员小杰@1 小时前
✨WordToCard使用分享✨
前端·人工智能·开源·云计算
larntin20021 小时前
vue2开发者sass预处理注意
前端·css·sass
Enti7c1 小时前
利用jQuery 实现多选标签下拉框,提升表单交互体验
前端·交互·jquery
SHUIPING_YANG2 小时前
在Fiddler中添加自定义HTTP方法列并高亮显示
前端·http·fiddler
互联网搬砖老肖3 小时前
Web 架构之前后端分离
前端·架构
水银嘻嘻3 小时前
web 自动化之 selenium+webdriver 环境搭建及原理讲解
前端·selenium·自动化
寧笙(Lycode)3 小时前
为什么使用Less替代原始CSS?
前端·css·less
-Camellia007-3 小时前
TypeScript学习案例(1)——贪吃蛇
javascript·学习·typescript
m0_zj3 小时前
57.[前端开发-前端工程化]Day04-webpack插件模式-搭建本地服务器
前端·webpack·node.js
緑水長流*z4 小时前
(14)Element Plus项目综合案例
vue.js·elementui·vue3·element plus·elementplus项目·完整项目案例·项目学习笔记