<el-table-column prop="isMasterJob" :label="$t('publicAll.userManagement.mainPost')" width="100"> <template #default="{ row, column, $index }"> <input type="radio" name="radio" @change="mainPost(row, $index)" :checked="row.isMasterJob == 1 ? true : false" > </template> </el-table-column> 如何点击取消单选再次点击选中单选
时间: 2024-04-10 18:34:58 浏览: 35
要实现取消单选再次点击选中单选的功能,你可以通过在点击事件中切换选中状态来实现。以下是一个示例代码:
```html
<el-table-column prop="isMasterJob" :label="$t('publicAll.userManagement.mainPost')" width="100">
<template #default="{ row, column, $index }">
<input type="radio" name="radio" @click="toggleRadio(row)" :checked="row.isMasterJob == 1 ? true : false">
</template>
</el-table-column>
```
```javascript
methods: {
toggleRadio(row) {
if (row.isMasterJob == 1) {
row.isMasterJob = 0; // 如果已选中,则取消选中
} else {
row.isMasterJob = 1; // 如果未选中,则选中
}
},
mainPost(row, index) {
// 处理选中逻辑
}
}
```
在上面的代码中,我们将点击事件从`@change`改为`@click`,并添加了一个`toggleRadio`方法来切换选中状态。如果`row.isMasterJob`的值为1(已选中),则将其设置为0(取消选中),反之亦然。这样,在每次点击时,单选框的选中状态就会切换。你可以根据需要修改`mainPost`方法来处理选中逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)