element-ui radio可取消选中

原创 已于 2023-11-21 17:05:14 修改 · 232 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #vue.js #javascript

于 2023-11-21 17:05:00 首次发布

对应的变量需要自己定义：

看效果

悦二熊
关注
单选框互斥且可同时取消选中
原在路上的博客。
06-15 546
单选框互斥且可同时取消选中
Element-ui 之 Radio 组件的源码分析
rongrongVivian的博客
06-13 1071
此篇文章将从Radio组件提供的属性和事件的角度，逐步分析element-ui的Radio组件源代码，从而介绍如何实现一个完整的Radio组件。
elementUI:el-radio再次点击取消选中状态
Queen-Shir的博客
04-22 990
<el-radio :label="sbType" v-model="sdTypeValue" @click.native.stop.prevent="queryByType()">{{sbType}}</el-radio>
element UI-单选（el-radio）增加取消功能
JustDI0209的博客
04-03 6024
记录调试增加el-radio的取消功能 1.为单选加click事件 2.在方法中进行判断，同时进行逻辑处理 3. 方法很简单，注意思考 1）单选控件首先记录一个下标 2）点击一条记录时，先获取下标，然后与先前记录的下标比较。 如果值相等，则表示是第二次点击该记录，需将下标重置为初始值（代码设置初始值100，是因为每页最多10条记录）； 如果值不相等，则表示第一次点击该记录，需...
Elementui Radio单选框取消选中
H524268015wsw的博客
01-08 3895
1.两种方法都可以达到取消选中的要求。2.不在意样式的选用第一种，要求样式的选择第二种。
element ui radio组件添加点击可取消选中状态
msisliao的博客
04-19 5152
有人会问：既然要取消选中为什么不用checkbox呢？ 举个栗子，比如选中性别时，用户可以选男或者女(二选一)，然后也可以取消选中(二者都不选) 这时这个demo就派上用场了 <!-- 如果直接@click会触发两次 默认有change事件 @click.native.prevent 加上这个阻止默认事件 --> <el-radio-group v...
element-ui循环显示radio控件信息的方法
10-18
而在 Element-UI 中，`<el-radio>` 的默认显示值实际上是 `label` 属性绑定的值。如果我们希望显示不同的内容，那么就应该使用插值表达式 `{{ item.name }}` 来替换它。 综上所述，通过结合 Vue 的数据绑定、循环...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
基于element-ui单选按钮插件特效代码
03-22
首先，Element-UI的单选按钮组件（Radio）是其基础组件之一，用于实现基本的选择功能。它提供了多种样式和交互效果，以满足不同场景的需求。这款基于Element-UI的单选按钮插件进一步增强了其美观性和用户体验，通过...
Element-ui 之 Radio-Group 组件的源码分析
rongrongVivian的博客
06-16 2162
文章将从`Radio-Group`组件提供的属性和事件的角度，逐步分析`element-ui`的`Radio-Group`组件源代码，从而介绍如何实现一个完整的`Radio-Group`组件。
【ElementUI】【Vue】el-Radio失效，无法切换选中效果
陶洲川的博客
02-26 1万+
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 【Vue】【ElementUI】为什么使用el-radio 标签失效？ 使用el-radio标签，点击图中的【审核不通过】圆形单点框，没有反应，还是默认选中【审核通过】。 二、解答 1、这里有个坑，就是ElementUI和Vue.js框架配合使用的时候，不支持连点。 错误方法： //3 审核 reviewSys
解决element-ui循环创建单选框组件，点击只选中一次
zah521999的博客
06-07 6845
此时获取到的radioCheck为一个json数组
Element Radio组件 点击取消选择
09-28 1644
有两个选项A、B 只能选择一个 单选按钮组组件无疑附加需求：当再次点击按钮组选中项时 取消选择。
elementUI 表格中运用radio默认选中与取消
热门推荐
qq_38374502的博客
07-13 2万+
&lt;el-table :data="logQueryDataaa" border highlight-current-row @row-click="clickrow"&gt; &lt;el-table-column width="55" align="center"&gt; &lt;template scope="scope"&amp
【elementUI】【radio】【vue3】 点击再点击 取消和选中
qq_53478650的博客
03-05 7717
通过传过来的e值与设置的radio值比较 （这里设定是如果相等则让radio为空（不选中），否则就让radio为这个传过来的值（ 选中），之后就会循环往复：为这个传过来的值e，为空.....）总结：通过以上方法实现了radiobutton的单个使用，虽然javajframe里的直接用，但这个官网好像没给说明（应该是觉得太简单了）然后编写这个事件的方法 （首先你要在data里return radio 或者其它方式）1、radio单用 想要重复点击选中取消选中两个状态切换的设置。
el-radio 选中后点击可取消
m0_47733490的博客
09-26 1766
实现el-radio选中后再次点击可取消选中
element中一个单选框radio时的选中和取消
m0_70547044的博客
03-16 8313
因为原生click事件会执行两次，第一次在label标签上，第二次在input标签， 这个时候我们就可以以这个来区分。当我们只有一个单选框时，需要进行选中和取消的操作，但如果不经过处理，选中后就根本取消不了。然后我试了一下加了点击事件，这里必须要加 native ，触发原生事件。样式变得区别好大，改的话又要花费一些时间。难道就没有一个更好的方法吗？这里的话就让他点击两次，但是因为每次点击的元素都不一样。然后我又在网上找，有人说点击事件改成这样。此时就可以实现了一个单选框时的选中和取消了。
element plus中el-radio选中之后再次点击取消选中
m0_49016709的博客
01-29 3530
element plus中el-radio选中之后再次点击取消选中
element radio ，单击取消
qq_32734639的博客
03-27 678
<el-radio-group v-model="baseInfoForm.cornerMarkId"> <el-row type="flex" :gutter="30"> <el-col v-for="item in corne...
element-ui中普通表格取消选中效果
最新发布
08-13
<think>根据用户需求，用户希望在使用Element UI的普通表格组件时，实现取消选中的效果。这通常涉及到清除已选中的行或控制选中状态。 在Element UI的表格中，要实现单选并支持取消选中，可以通过以下步骤实现： 1. 使用`el-table`组件的`highlight-current-row`属性可以开启单选高亮当前行的功能。但是默认情况下，点击已选中的行不会取消选中，需要额外处理。 2. 通过监听行点击事件（`row-click`）或使用`@click`事件，在事件处理函数中判断当前点击的行是否已经被选中，如果是，则清除选中状态；如果不是，则选中该行。 具体实现方法如下： ### 方法1：使用`current-change`事件和`row-click`事件结合 - 在表格上设置`highlight-current-row`属性，这样表格会高亮当前选中的行。 - 绑定`current-change`事件，用于记录当前选中的行（`currentRow`）。 - 绑定`row-click`事件，在点击行时，判断当前点击的行是否与已选中的行相同。如果相同，则清除选中（将`currentRow`设为`null`）；如果不同，则设置当前行（实际上`current-change`事件会自动处理）。 但是，由于`current-change`事件在选中行变化时触发，而直接设置`currentRow`为`null`并不会触发`current-change`事件，因此我们需要在模板中通过`ref`获取表格实例，然后调用其`setCurrentRow`方法来设置当前行。 示例代码： ```html <template> <el-table ref="singleTable" :data="tableData" highlight-current-row @row-click="handleRowClick" style="width: 100%" > <!-- 列定义 --> <el-table-column property="date" label="日期"></el-table-column> <el-table-column property="name" label="姓名"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [/* 表格数据 */], currentRow: null // 当前选中的行 }; }, methods: { handleRowClick(row, column, event) { // 如果点击的是已选中的行，则取消选中 if (row === this.currentRow) { this.$refs.singleTable.setCurrentRow(); this.currentRow = null; } else { // 否则，选中该行（实际上setCurrentRow会触发current-change事件，从而更新currentRow） this.$refs.singleTable.setCurrentRow(row); } } }, watch: { // 也可以监听currentRow的变化 } }; </script> ``` ### 方法2：使用`row-class-name`属性配合样式控制（不推荐） 另一种思路是通过自定义行样式，但这种方法并不能真正取消选中，只是视觉上取消高亮，且无法通过表格的API获取当前选中行。因此不推荐。 ### 方法3：使用多选表格模拟单选并支持取消 使用多选表格（`el-table`的`type="selection"`），但设置单选（通过`select`事件控制每次只能选一行），并在点击已选中的行时取消选中。 示例代码： ```html <template> <el-table ref="multipleTable" :data="tableData" @select="handleSelect" style="width: 100%" > <el-table-column type="selection" width="55"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [/* 表格数据 */], selectedRow: null // 当前选中的行 }; }, methods: { handleSelect(selection, row) { // 如果当前行已经被选中（即在selection数组中），则再次点击会取消选中，此时selection数组为空或为其他行 // 但我们需要模拟单选，所以先清除所有选中 this.$refs.multipleTable.clearSelection(); // 如果当前点击的行不是之前选中的行（即新选中的行），则选中它 if (row !== this.selectedRow) { this.$refs.multipleTable.toggleRowSelection(row, true); this.selectedRow = row; } else { // 否则，说明是取消选中，将selectedRow置为null this.selectedRow = null; } } } }; </script> ``` 但是这种方法在取消选中时，由于先执行了`clearSelection`，然后并没有选中任何行，所以可以达到取消选中的效果。但是注意，这种方法每次只能选中一行。 ### 总结 根据用户的需求，推荐使用方法1（使用`highlight-current-row`）来实现单选且可取消选中的效果，因为它更符合单选的语义，且Element UI原生支持。 相关问题： 1. 在Element UI表格中，如何实现多选并支持取消单个选中？ 2. Element UI表格中，如何获取当前选中的行数据？ 3. 如何禁用Element UI表格中的某些行的选中功能？ [^1]: Element-ui中Radio组件取消选中 [^2]: vue+element-ui实现表格编辑 [^3]: element-ui表格实现选中删除功能 [^4]: element-ui实现表格单选的功能</think>### Element UI 普通表格实现取消选中效果 在 Element UI 的普通表格中实现取消选中效果，可以通过以下两种常用方法实现： --- #### 方法 1：通过 `current-row-key` 和 `row-click` 实现（推荐） ```html <template> <el-table :data="tableData" highlight-current-row :current-row-key="currentRowKey" @row-click="handleRowClick" > <!-- 列定义 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ], currentRowKey: null // 存储当前选中行的唯一标识 }; }, methods: { handleRowClick(row) { // 点击已选中的行时取消选中 if (this.currentRowKey === row.id) { this.currentRowKey = null; } // 点击未选中的行时选中 else { this.currentRowKey = row.id; } } } }; </script> ``` **实现原理**： 1. 使用 `highlight-current-row` 开启行高亮 2. 通过 `current-row-key` 绑定当前选中行的唯一标识（如 id） 3. 在 `@row-click` 事件中切换选中状态： - 点击已选中的行时，将 `currentRowKey` 设为 `null` 取消选中 - 点击未选中的行时，将 `currentRowKey` 设为该行 id --- #### 方法 2：通过 `ref` 操作表格实例 ```html <template> <el-table ref="myTable" :data="tableData" highlight-current-row @row-click="handleRowClick" > <!-- 列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [/* 数据 */], currentRow: null // 存储当前选中行 }; }, methods: { handleRowClick(row) { // 点击已选中的行时取消选中 if (this.currentRow === row) { this.$refs.myTable.setCurrentRow(); // 清空选中 this.currentRow = null; } // 点击未选中的行时选中 else { this.currentRow = row; } } } }; </script> ``` **关键 API**： - `this.$refs.tableRef.setCurrentRow()`：清空当前选中行 - `this.$refs.tableRef.setCurrentRow(row)`：设置特定行为选中状态 --- #### 补充说明 1. **取消选中时的视觉反馈**： ```css /* 隐藏默认选中样式 */ .el-table__body tr.current-row > td { background-color: transparent !important; } ``` 2. **多场景应用**： - 结合操作按钮取消选中： ```javascript clearSelection() { this.$refs.myTable.setCurrentRow(); this.currentRow = null; } ``` 3. **完整流程**： ```mermaid graph TD A[点击表格行] --> B{是否已选中?} B -- 是 --> C[取消选中] B -- 否 --> D[设置选中] C --> E[更新currentRowKey为null] D --> F[更新currentRowKey为行ID] ``` --- ### 相关问题 1. 如何在 Element UI 表格中实现双击行取消选中效果？ 2. Element UI 表格的多选模式下如何实现单个选项取消选中？ 3. 如何保存和恢复 Element UI 表格的选中状态？ 4. 在 Vue3 + Element Plus 中如何实现相同的取消选中效果？ 5. 如何为取消选中的行添加自定义动画效果？ [^1]: Element-ui中Radio组件取消选中 [^2]: vue+element-ui实现表格编辑 [^3]: element-ui表格实现选中删除功能 [^4]: element-ui实现表格单选的功能
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值