vue table checkbox 单选问题

<table class="table clear" ref="tableDialog"> <tr> <th width="30"></th> <th >帖子</th> <th >作者</th> <...

在 Vue 3 中，使用 Element Plus 的<el-table>组件时，如果你想实现行筛选功能，并且要求这种筛选为单选（即每次只能选择一行），你可以通过结合使用selection模式和一些额外的逻辑来实现。

添加 ref属性名 在表格上加@row-click单击事件。在表格上添加@selection-change方法。这个方法可以保证每次都是选择最后点击的那行。selection即为选中的多个数据的数组。

基于vue2和element UI 实现table组件checkbox多选框的单选操作

vue全选、单选.gif](https://img-blog.csdnimg.cn/img_convert/533582c93bbf6eea5f2b993。

参考ElementUI文档-table 参考ElementUI文档-table

Vue 实现checkbox的单选以及全选 <template> <div> <span>全选</span> <input type="checkbox" v-model="checkAll" /> <div v-for="(item,index) in test" :key="index"> ...

table表格有时需要在每行前面添加一列实现可勾选对应行的状态，table默认是多选的逻辑，如果需要实现单选，需要结合table封装好的一些方法和事件 html部分： <el-table ref="multipleTable" :data="tableData" highlight-current-row @select-all="onSelectAll" @selecti

可以自定义各种样式的单选复选框，比一些组件用起来方便。Vue中手写checkbox自定义复选框、单选框。案例展示，样式就不多阐述了，自己根据情况写。

需求: 用 el-checkboc 实现单选功能并且当选中某一项时则回填到input框里,当点击 enter 键或者是 按下搜索图标按键,来实现页面搜索内容的同步展示;

el-table实现单选行

el-table文档中没有表格数据单选，因此基于复选框实现数据单选限制。

为什么有radio不用，偏偏要使用CheckBox实现单选效果呢？ 答案是如果想同时实现单选，又实现可以一个都不选的话。只能使用CheckBox来做了。   通过jQuery来做 实现思路： 1.如果当前对象不选中：去除当前对象的选中状态 2.如果当前对象选中： 通过CheckBox的class循环，去除所有CheckBox的选中状态。 设置当前的对象的状态为选中(因为在循环时把状...