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)

}

相关推荐
吹牛不交税12 分钟前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD0012 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
御承扬2 小时前
鸿蒙NDK UI之文本自定义样式
ui·华为·harmonyos·鸿蒙ndk ui
铅笔侠_小龙虾2 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七2 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
2501_944711433 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜3 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
阔皮大师3 小时前
INote轻量文本编辑器
java·javascript·python·c#
lbb 小魔仙3 小时前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js
_codemonster3 小时前
Vue的三种使用方式对比
前端·javascript·vue.js