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)

}

相关推荐
HaanLen43 分钟前
React19源码系列之渲染阶段performUnitOfWork
前端·javascript·react.js·react19源码
小徐敲java1 小时前
Vue3中reactive响应式使用注意事项
前端·javascript·vue.js
编码七号1 小时前
【知识点】关于vue3中markRow、shallowRef、shallowReactive的了解
前端·javascript·vue.js
二次程序员1 小时前
ECharts图表工厂,完整代码+思路逻辑
前端·javascript·css·echarts·抽象工厂模式·大屏端
Liu.7741 小时前
vue2组件对象传参
开发语言·前端·javascript
Java开发追求者2 小时前
hbuilder中h5转为小程序提交发布审核
前端·javascript·小程序
GISer_Jing2 小时前
React Hooks底层执行逻辑详解、自定义Hooks、Fiber&Scheduler
前端·javascript·react.js
stoneSkySpace2 小时前
算法--js--组合总和
前端·javascript·算法
素界UI设计2 小时前
如何制作令人印象深刻的UI设计?
ui