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)

}

相关推荐
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef066 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端7 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder8 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句8 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom8 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子8 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript