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>
相关推荐
2401_878454531 小时前
Themeleaf复用功能
前端·学习
葡萄城技术团队3 小时前
基于前端技术的QR码API开发实战:从原理到部署
前端
八了个戒5 小时前
「数据可视化 D3系列」入门第三章:深入理解 Update-Enter-Exit 模式
开发语言·前端·javascript·数据可视化
noravinsc5 小时前
html页面打开后中文乱码
前端·html
胚芽鞘6815 小时前
vue + element-plus自定义表单验证(修改密码业务)
javascript·vue.js·elementui
小满zs6 小时前
React-router v7 第四章(路由传参)
前端·react.js
小陈同学呦6 小时前
聊聊双列瀑布流
前端·javascript·面试
键指江湖6 小时前
React 在组件间共享状态
前端·javascript·react.js
烛阴6 小时前
零基础必看!Express 项目 .env 配置,开发、测试、生产环境轻松搞定!
javascript·后端·express
诸葛亮的芭蕉扇7 小时前
D3路网图技术文档
前端·javascript·vue.js·microsoft