el-table控制部分复选框禁止选中

Vue.js:禁用el-table部分复选框
最新推荐文章于 2025-09-11 15:53:06 发布
原创 最新推荐文章于 2025-09-11 15:53:06 发布 · 740 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

el-table控制部分复选框禁止选中

<el-table-column
   type="selection"
   :selectable="checkboxInit">
</el-table-column>

checkboxInit(row,index){
  if(row.state === 1){
    return 1
  }else{
    return 0
  }
}

方法内适配自己的条件判断就可以了

 

ElementUI - ＜el-table＞ 表格 selection 设置的复选框禁止选中某些行
🏆 前端领域优质创作者
07-23 1万+
前言 当表格设置 selection 开启复选框可选时，您可能需要禁用一些 业务条件成立 的行数据。 例如，禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据，复选框无法选中，如下图所示效果： 实现方法 表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。 该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行
vue2 - elementUI表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消children（当子级全选中，父级自动勾选）
高级前端工程师
12-15 1万+
vue2，elementui，el-table树状表格多选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，elementUI表格里树形结构嵌套复选框全选全
【ElementUI】el-table中复选框禁用处理
前端知识分享喵
09-20 7142
el-table中复选框禁用处理
在el-table中多选行中的check-box的禁用方法，多选禁用
最新发布
u010782109的博客
09-11 159
本文介绍了表格组件中type=selection列的两个关键属性： reserve-selection：布尔类型，设为true可在数据更新后保留已选项（需指定row-key），默认false。 selectable：函数类型，通过返回值控制某行的复选框是否可勾选，参数为row和index。 配图展示了带复选框的表格列效果，支持行选中状态保留与可选性控制功能。这两个属性常用于实现表格的多选交互场景。
element el-select+el-checkbox多选实现二级联动单个选项禁用效果以及选中选项对应表头高亮:header-cell-style（中级）
敲代码无敌小奶龙的博客
01-14 4328
element el-select+el-checkbox多选实现下拉框二级联动+禁用单个选项+选中选项对应表头高亮。
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
热门推荐
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
[ element-ui:table ] 设置table中某些行数据禁止被选中，通过selectable 定义方法解决
weixin_70506521的博客
11-04 6708
[ element-ui:table ] 设置table中某些行数据禁止被选中，通过selectable 定义方法解决
el-table 第一列增加复选框选择确定该行id，值
daxiashangxian的博客
10-01 406
【代码】el-table 第一列增加复选框选择确定该行id，值。
vue3 - elementPlus表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消，children当子级全选中，父级自动勾选
高级前端工程师
12-15 1万+
vue3，Element Plus，el-table树状表格多选，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，表格checkbox复选框的全选反选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，有分
el-table复选框实现分页记忆
qq_42248955的博客
06-06 1234
el-table 结合 el-pagination 实现分页后默认是没有复选框记忆功能的,想到采用Map数据结构来存储所选选项。但是vue响应数据是不支持的，Map与Set里面的元素变化时Vue追踪不到这些变化，因此无法做出响应。 解决方法是将Map可序列化，写在computed中实现响应式。 data () { return { myMap:new Map(), } }, methods:{ selectMemoriedDataFn () { // 分页记忆自动选中方..
el-tablebiu表格中选择框禁用
普通前端一枚
06-14 432
但是如果表格设置了点击行选中的话，这个还是不生效的。设置属性：selectable。
el-table 的选择框如何根据条件设置某项不可选中
前端笔记——放弃很容易,但坚持一定很酷
03-13 2610
核心代码： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在选择框的列上加上。，selectable是一个函数，返回值为false的时候，表格列禁止选中。效果如图：实现某条数据不可选，其他数据可选。
el-table禁止选中
wyystyle的博客
11-10 542
methods：{ isSlect(row){ return row.activation == “1”; }, }
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2725
el-table 勾选框禁用
el-table可以选中 但是在某些条件下禁止选中
只会写bug
10-22 1941
在Element UI中，可以通过覆盖默认的行为来实现这样的功能，即在某些条件下禁止选中表格中的行。具体来说，可以通过监听。字段，并根据此字段决定是否允许选中，就能实现在某些条件下禁止选中的功能。事件或者覆盖选择框的行为来实现这一点。以下是一个示例，展示了如何在一个。这样，通过在数据中增加一个。
el-table表格内的checkbox复选框selection 设置禁用
weixin_45225432的博客
02-16 2983
【代码】el-table表格内的checkbox复选框selection 设置禁用。
el-table在某些条件下禁止选中
只会写bug
10-22 883
【代码】el-table在某些条件下禁止选中。
checkbox阻止选中事件
zjb1314th的博客
08-27 3554
前端开发过程中，有时会遇到互斥的checkbox选项，此时需要根据已选中的选项，阻止互斥checkbox的选中事件。代码如下： $("input[name='check_box']").on('click', function() { //此处判断互斥逻辑 if() { return false; } }); ...
element-ui el-table 选择框禁止选中
棠樾的博客
12-16 288
根据API 里面有个Table-column Attributes
el-table动态控制复选框单选或多选
03-26
在使用 `el-table`（Element Plus 的表格组件）时，我们可以通过自定义的方式动态控制复选框的行为，例如限制其为单选或多选模式。 以下是实现思路： ### 动态控制复选框为单选或多选 1. **绑定 `selection-change` 事件** 首先需要监听表格的选择变化事件 (`@selection-change`)。当用户选择某一行时会触发该事件，并返回当前所有选中的行数据列表。 2. **通过状态管理判断是否允许多选** 我们可以引入一个变量 (如 `isSingleSelect`) 来标识当前是否只允许多选还是单选。如果设置成单选，则每次新选择一项时清空之前的所有选项；如果是多选则无需操作。 #### 示例代码 ```vue <template> <div> <!-- 表格 --> <el-table ref="tableRef" :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <!-- 切换单选/多选按钮 --> <el-button @click="toggleSelectionMode">切换到{{ isSingleSelect ? '多选' : '单选' }}</el-button> </div> </template> <script setup> import { ref } from "vue"; // 数据源 const tableData = [ { name: "张三", age: 20 }, { name: "李四", age: 24 }, ]; // 控制是否单选，默认开启单选 const isSingleSelect = ref(true); // 获取表格引用 const tableRef = ref(null); // 处理选中事件 function handleSelectionChange(selection) { if (isSingleSelect.value && selection.length > 1) { // 如果是单选模式并且选择了超过一项，则保留最后一项并清除其他选择 const lastSelectedRow = selection.pop(); // 取出最新的一条记录 tableRef.value.clearSelection(); tableRef.value.toggleRowSelection(lastSelectedRow); // 设置新的选中项 } } // 切换单选和多选模式 function toggleSelectionMode() { isSingleSelect.value = !isSingleSelect.value; } </script> ``` 在这个例子中，我们利用了 Vue 组件的状态管理和 Element UI 提供的功能 API 实现对复选框行为的动态调整。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值