element ui 表格实现单选

<el-table :data="tableDataSum">

<el-table-column prop="userId" align="center" label="ID" width="100" />

<el-table-column prop="nickName" align="center" label="昵称" width="100" />

<el-table-column prop="headUrl" align="center" label="头像" width="100">

<template #default="{ row }">

<el-avatar :src="row.headUrl" />

</template>

</el-table-column>

<el-table-column prop="mobile" align="center" label="手机" width="120" />

<el-table-column prop="realNameSystem" align="center" label="状态" width="100">

<template #default="{ row }">

<el-tag :type="row.realNameSystem == 1 ? 'success' : 'danger'">

{{ row.realNameSystem == 1 ? '已认证' : '未认证' }}

</el-tag>

</template>

</el-table-column>

<el-table-column prop="name" align="center" label="操作">

<template #default="{ row }">

<el-radio

v-model="selectedId"

:value="row.userId"

@click.stop ="handleSelect(row)"

></el-radio>

</template>

</el-table-column>

</el-table>

const selectedId = ref<string>('')

const handleSelect = (row: any) => {

console.log(row)

selectedId.value = selectedId.value == row.userId ? '' : row.userId

bindUserId.value = selectedId.value

console.log(selectedId.value)

}

相关推荐
GISer_Jinger23 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s24 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
pepedd86434 分钟前
深度解剖 Vue3 架构:编译时 + 运行时的协作
前端·vue.js·trae
s3xysteak37 分钟前
我要成为vue高手02:数据传递
前端·javascript·vue.js
pepedd86437 分钟前
深入理解Vue响应式原理-源码解析
前端·vue.js·trae
Warren981 小时前
Spring Boot 整合网易163邮箱发送邮件实现找回密码功能
数据库·vue.js·spring boot·redis·后端·python·spring
文艺理科生1 小时前
Nuxt 状态管理权威指南:从 useState 到 Pinia
前端·javascript·vue.js
汪子熙2 小时前
解决 Node.js 无法获取本地颁发者证书问题的详细分析与代码示例
javascript·后端
秋秋小事2 小时前
React Hooks UseRef的用法
前端·javascript·react.js
麦麦大数据3 小时前
求职推荐大数据可视化平台招聘系统 Vue+Flask python爬虫 前后端分离
vue.js·爬虫·python·信息可视化·flask·推荐算法·协同过滤