el-table复选框点击全选后又全部自动取消选中

已于 2024-01-15 15:01:30 修改
阅读量1k 收藏 8
点赞数 10
CC 4.0 BY-SA版权
分类专栏： elementUI 文章标签： elementui
于 2024-01-15 10:26:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WDY66886688/article/details/135595178
本文介绍了在Vue中使用ElementUI表格组件时，如何设置row-key属性以确保数据唯一性，并提醒避免使用index作为key，以及如何配置selection列以实现多选功能和保留选择状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<el-table  
  :row-key="row => row.id" // id为表格数据中的一个属性（唯一），row为每一行数据
    <el-table-column
        type="selection"
        :reserve-selection="true"
        row-key="id" // row-key此时不带冒号，绑定值为数据中属性id,注：表格中不建议使用index作为key，删除数据时，索引会自动连续;如果没有这行，会导致选中每一行，打印的都是改行数据，但复选框高亮的都是当前页最后一行
        width="55">
    </el-table-column>   
</el-table>

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表格里树形结构嵌套复选框全选全
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_41838435的博客
12-05 4830
其实非常简单，el-table自带的都有方法toggleAllSelection()和clearSelection()
tabel多选全选选中后马上自动取消选中
LiuxiaoXue_2018的博客
06-08 371
应用场景，列表有倒计时展示，处理数据的时候加了定时器，导致我一选中下一秒就自动取消了。解决方案：不去实时改变tabel关联的数据，可以通过另外再创一个对象数据，去展示。这种情况要考虑一下，数据是否有在实时刷新。我也想知道是否有更好的方式解决呢。
el-table表格每一列前的多选框如何勾选和取消（易错点-两个坑）
weixin_52443895的博客
08-26 7841
el-table表格每一列前的多选框如何勾选和取消（易错点-两个坑）
elementUI表格复选框只能选中一个
qq_47101042的博客
03-16 2865
table表格单选
el-table 行选中与取消
codeLAU的博客
08-07 4198
el-table 行选中与取消
el-table表格树状图复选框全选问题，勾选全选时，子结构未被勾选
qq_41038929的博客
07-10 1259
在table里进行绑定 ref="districtTable" @select-all="selectAll" 在data里进行声明 isAllSelect: false //定义是否全选的初始值 在方法methods里写 // 全选/取消选操作 selectAll() { this.isAllSelect = !this.isAllSelect; // isAllSelect data里定义的初始值 this.splite(this.parentsData, this.isAllS
Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列，并同步更新表格复选框 UI 状态（el-table 表格组件中，通过代码手动控制某个列的选中与取消勾选，并且复选框跟着变）
资深程序员
11-28 4504
vue3，elementplus，elementplus手动移除某项勾选，elementplus表格列勾选如何手动删除某项，elementplus表格el-table组件如何清除和选中指定复选框，如何去掉勾选某几个，怎么手动控制取消表格列的勾选状态，element表格列勾选如何手动控制，表格手动取消选中某一个复选框，手动操作elementplus表格复选框的选中与反选功能，如何手动取消复选框的勾选，复选框手动勾选和取消某项，把勾选列表的数据删除后,复选框ui状态不变怎么办，如何点击按钮控制复选框的
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
例如，当用户点击复选框时，判断当前节点的选中状态，并相应地更新所有父节点和子节点的选中状态。这通常需要遍历树结构并手动调整每个相关节点的状态。 在实际代码中，el-tree组件的一些关键属性包括： 1. `node-...
清除el-table选中状态 clearSelection
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
02-01 2050
【代码】清除el-table选中状态 clearSelection。
el-table多选表格 实现默认选中 删除选中列表取消勾选等联动效果
weixin_49203377的博客
10-26 2771
el-table多选表格 实现默认选中 删除选中列表取消勾选等联动效果
el-table多选，循环出选中的值点击名字el-table取消选中
qq_43059898的博客
03-01 333
<template> <div> <div style="display: flex; margin-bottom: 20px"> <div v-for="item in checklist" :key="item.id" @click="del([item])"> {{ item.name }} &nbsp; </div> </div> <el-tabl
table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单
weixin_42024333的博客
11-06 2336
【代码】table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单。
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行。拖拽选择上下行数据。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-11 1814
【代码】基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行。
vue3 使用 Element Plus el-table 清除选中项
weixin_51600020的博客
06-27 1万+
Element Plus el-table 清除多选
el-table和分页保持选中状态，点击右边的删除可以取消选中状态，包含取消另一页的数据
qq_44721624的博客
10-28 556
首先我的页面的需求是，一个el-table，可以分页，然后右边是自己写的一个选中的所有的数据展示，点击右边的删除按钮，可以删除选中的一条数据，并且在表格中删除选择的状态。我的这个需求死右侧选中的数据只能一条一条的删除，但表格中可以全选和取消全选。以下提供表格能全选和不能全选的方法。
el-table多选框点击表格选中和取消
weixin_459417989的博客
07-30 5251
<div> <el-table ref='mytable' :data='dataList' @select-change='checkAll' @row-click='checkOne'> <el-table-column type='selection'></el-table-column> <el-table-column type='index' label='序号'></el-table-column> <el-ta
element 列表选中取消选中
hfyldx的博客
07-29 847
【代码】element 列表选中取消选中。
el-table复选框禁用
最新发布
07-19
<think>我们正在使用Element UI的el-table组件，并希望禁用某些行的复选框。根据引用内容，我们可以通过`selectable`属性来实现。该属性绑定一个方法，该方法根据行的数据返回布尔值（true表示可选，false表示禁用）。 步骤： 1. 在el-table-column中设置type="selection"，并添加:selectable="方法名"。 2. 在methods中定义该方法，根据row（当前行数据）判断是否禁用。如果返回false，则该行复选框被禁用。 注意：引用[1]和引用[4]提供了具体的方法实现示例。引用[2]和引用[3]分别提供了样式修改和另一种返回值的写法（但注意引用[3]中返回0/1，实际上Element UI要求返回布尔值，但也可以接受0（false）和1（true）？不过官方文档建议返回布尔值）。 因此，我们可以这样实现： 模板部分： ```html <el-table :data="tableData"> <el-table-column type="selection" :selectable="isSelectable" width="55"></el-table-column> <!-- 其他列 --> </el-table> ``` 在Vue实例的methods中定义isSelectable方法： ```javascript methods: { isSelectable(row, index) { // 根据row的某些属性判断是否禁用 // 例如，如果row中有一个disabled字段为true，则禁用 if (row.disabled) { return false; } return true; } } ``` 另外，引用[2]提到如果复选框被禁用且被选中，可以通过样式修改其外观（比如改变背景色和边框色）。如果不需要修改样式，可以忽略。 注意：禁用后，用户将无法通过点击复选框来改变选中状态（包括取消选中）。所以，如果某行已经被选中，然后我们禁用了它，那么用户将无法取消选中。因此，在设置禁用时，通常需要结合业务逻辑考虑是否预先选中这些行。 如果希望禁用的行一开始就被选中且不可更改，可以在数据初始化时设置选中（通过el-table的toggleRowSelection方法），然后禁用。 示例：在表格数据加载后，对需要禁用的行设置选中状态（如果它们需要被默认选中且禁用）： ```javascript this.$nextTick(() => { this.tableData.forEach(row => { if (row.disabled) { this.$refs.table.toggleRowSelection(row, true); } }); }); ``` 注意：这里假设表格的ref属性设置为"table"，即`<el-table ref="table" ...>`。 总结： 1. 使用selectable方法控制每行是否可选中（禁用）。 2. 如果需要默认选中禁用的行，可以在数据加载后通过toggleRowSelection方法设置选中。 3. 如果需要修改禁用状态下被选中的复选框样式，可以按照引用[2]的样式进行修改。 相关问题： 1. 如何设置el-table中某些行的复选框为默认选中且不可更改？ 2. 如何修改el-table中禁用的复选框的样式？ 3. el-table的selectable方法返回什么值？可以返回数字0和1吗？ 4. 在el-table中，如何实现全选按钮不包含禁用的行？</think>在 Element UI 的 el-table 中禁用复选框，可通过 `selectable` 属性实现。以下是完整解决方案： ### 实现步骤 1. **添加选择列** 在 el-table 中定义 `type="selection"` 的列，并绑定 `:selectable` 属性： ```html <el-table :data="tableData"> <el-table-column type="selection" :selectable="isRowSelectable" <!-- 关键属性 --> width="55"> </el-table-column> <!-- 其他列 --> </el-table> ``` 2. **定义禁用逻辑** 在 Vue 的 `methods` 中实现 `isRowSelectable` 方法，通过返回值控制是否禁用： ```javascript methods: { isRowSelectable(row, index) { // 示例1：根据状态字段禁用 if (row.status === 'disabled') return false // 示例2：禁用已选中的行（需配合选中状态数据） const isSelected = this.selectedData.some(item => item.id === row.id) return !isSelected } } ``` ### 完整示例 ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" :selectable="isRowSelectable" width="55"> </el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '项目A', status: 'active' }, { id: 2, name: '项目B', status: 'disabled' }, // 此行将被禁用 { id: 3, name: '项目C', status: 'active' } ], selectedData: [] // 存储已选数据 } }, methods: { // 禁用逻辑 isRowSelectable(row) { // 条件1：状态为 disabled 时禁用 // 条件2：已选中的行禁用（防止重复选择） return row.status !== 'disabled' && !this.selectedData.some(item => item.id === row.id) }, // 更新选中数据 handleSelectionChange(selection) { this.selectedData = selection } } } </script> <style> /* 可选：修改禁用复选框样式 */ .el-checkbox.is-disabled .el-checkbox__inner { background-color: #f5f7fa; border-color: #e4e7ed; } </style> ``` ### 关键说明 1. **`selectable` 属性** - 必须绑定一个返回布尔值的函数 - `return true`：该行可选（默认） - `return false`：禁用该行复选框 2. **典型禁用场景** - 根据行数据状态禁用（如 `row.status === 'inactive'`） - 禁用已选中的行（需配合 `selection-change` 事件） - 基于权限控制（如 `row.permissionLevel < 3`） 3. **样式自定义** 如需修改禁用样式，通过 CSS 覆盖默认样式： ```css /* 禁用状态下的选中样式 */ .el-checkbox.is-disabled.is-checked .el-checkbox__inner { background-color: #d7063b !important; border-color: #d7063b !important; } ``` ### 注意事项 1. 禁用行的复选框**无法通过点击改变状态**，但可通过 `toggleRowSelection` 编程控制 2. 禁用行的选中状态不会包含在 `selection-change` 事件返回的数据中 3. 全选操作会自动跳过已禁用的行[^1][^4] ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值