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)

}

相关推荐
拖拉斯旋风20 小时前
从零开始:使用 Ollama 在本地部署开源大模型并集成到 React 应用
前端·javascript·ollama
德育处主任20 小时前
『NAS』在群晖部署图片压缩工具-Squoosh
前端·javascript·docker
心.c21 小时前
如何基于 RAG 技术,搭建一个专属的智能 Agent 平台
开发语言·前端·vue.js
计算机学姐21 小时前
基于SpringBoot的校园资源共享系统【个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·后端·mysql·spring·信息可视化
Van_captain1 天前
rn_for_openharmony常用组件_Breadcrumb面包屑
javascript·开源·harmonyos
静听松涛1331 天前
提示词注入攻击的防御机制
前端·javascript·easyui
澄江静如练_1 天前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕1 天前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
Irene19911 天前
Vue2 与 Vue3 响应式实现对比(附:Proxy 详解)
vue.js·响应式实现
全栈前端老曹1 天前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json