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)

}

相关推荐
coding丨26 分钟前
自制微信小程序popover菜单,气泡悬浮弹窗
前端·javascript·vue.js
1024小神37 分钟前
tauri项目添加多文件下载功能,并支持下载进度回调显示在前端页面上
前端·javascript
呆呆的心1 小时前
深入剖析 JavaScript 数据类型与 Symbol 类型的独特魅力😃
前端·javascript·面试
有仙则茗1 小时前
process.cwd()和__dirname有什么区别
前端·javascript·node.js
Java水解2 小时前
JavaScript 正则表达式
javascript·后端
北凉温华2 小时前
Vue 3 + AntV X6 实现流程编辑功能
前端·vue.js
独立开阀者_FwtCoder2 小时前
从卡顿到丝滑,AI 应用体验跃升的幕后推手是它!
前端·vue.js·面试
BUG收容所所长2 小时前
揭秘 To-Do List:一个前端小玩具的“幕后玩家”
javascript·css
自学前端_又又2 小时前
3年Vue3,借Trae之力,实现转React的有缝连接
前端·javascript·trae
橙某人2 小时前
✂️图片裁剪进阶篇 - 固定比例与裁剪模式
前端·javascript·vue.js