element表格实现复选框单选
默认表格前面的复选框是可以选择多个,但有的需求是只能选择一个,
可以通过clearSelection和toggleRowSelection去实现,把当前选中的这条selected设置成true。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < div class="same-table"> < el-table :data="tableData" class="oneTabel" ref="multipleTable" border fit @selection-change="handleSelectionChange" @select-all="dialogCheck" @select="dialogCheck" style="width:100%;"> < el-table-column type="selection" width="50"></ el-table-column > < el-table-column type="index" width="60" label="序号"></ el-table-column > < el-table-column prop="name" label="机构"></ el-table-column > < el-table-column prop="negativeDec" label="负面清单描述"></ el-table-column > </ el-table > </ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | methods: { handleSelectionChange(val) { console.log(val, 'val' ) this .multipleSelection = val; }, dialogCheck: function (selection, row) { console.log(selection, row); this .$refs.multipleTable.clearSelection() if (selection.length === 0) { return } if (row) { this .selectioned = row this .$refs.multipleTable.toggleRowSelection(row, true ) } } } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2020-01-30 Vue Cli3配置文件优化处理
2019-01-30 vue常用指令
2019-01-30 vue实现简单的全选、反选、不选