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)

}

相关推荐
Dxy12393102161 小时前
MySQL索引完整教程:创建、查看、修改、删除与日常管理
前端·javascript·mysql
端庄的战斗机3 小时前
javascript 设计模式(文章很长,请自备瓜子,水果和眼药水)
开发语言·javascript·设计模式
踩着两条虫5 小时前
可视化 vs 终端 vs 云端:VTJ.PRO、Claude Code、Codex 三强横评
前端·vue.js·人工智能·低代码·架构
前端毕业班5 小时前
uni-app 小程序支持 teleport 了
前端·javascript·vue.js
东风破_6 小时前
LLM 为什么记不住你?无状态、messages 和上下文管理
javascript·人工智能
Hilaku6 小时前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
古夕7 小时前
多应用同域部署下 Favicon 异常问题排查与治理
前端·javascript
逗逗豆巴吧7 小时前
WPS 加载项中实现当前文档直接上传
前端·javascript·ecmascript 6
妙码生花7 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(二十一):网络请求封装优化
前端·javascript·vue.js
用户11481867894847 小时前
普通Fetch、Fetch流式、Axios、SSE:谁才是流式输出的正确操作?
前端·javascript