elementui 单选按钮
时间: 2023-08-21 14:06:49 浏览: 145
element-ui的单选按钮可以通过添加空格标签` `来去除按钮里的数字。具体的代码如下所示:
```html
<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"> </el-radio>
```
同时,你也可以通过点击行数据时,使得数据选中,并且行数据前面的复选框也被勾选。具体的代码如下所示:
```html
<el-table ref="multipleTable" :data="formData" size="small" highlight-current-row @row-click="handleCurrentChange" @selection-change="select" @select-all="selectAll">
```
在methods中,你可以添加以下代码来实现单选功能:
```javascript
handleCurrentChange(row) {
this.id = row.id;
this.$refs.multipleTable.toggleRowSelection(row);
}
```
同时,你也可以添加以下代码来实现控制单选功能:
```javascript
checkBoxChange(val) {
if (this.checkList.indexOf(val) > -1) {
this.checkList = \[\];
this.checkList.push(val);
}
}
```
希望以上代码对你有帮助。
#### 引用[.reference_title]
- *1* [Element-ui表格添加单选按钮](https://blog.csdn.net/weixin_43953518/article/details/104629185)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Element ui表单实现点击行数据单选,复选框打勾](https://blog.csdn.net/qq_43180790/article/details/127962283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [element ui 表格设置单选按钮](https://blog.csdn.net/qq_34953053/article/details/109486331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文