当前位置: 首页 > news >正文

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)

}

http://www.xdnf.cn/news/583993.html

相关文章:

  • v2.0 技术篇目录-研究生如何选择编程技术
  • iOS工厂模式
  • uniapp-商城-65-shop(1-品牌信息显示,将数据库信息同步到vuex的state)
  • 如何构建一个简单的AI Agent(极简指南)
  • 深度学习入门到实战:用PyTorch打通数学、张量与模型训练全链路​
  • 使用 A2A Python SDK 实现 CurrencyAgent
  • 开闭原则 (Open/Closed Principle, OCP)
  • leetcode hot100刷题日记——10.螺旋矩阵
  • day33 python深度学习入门
  • jmeter登录接口生成一批token并写入csv文件
  • 浪潮Inspur服务器产品线概述
  • 【paddle】常见的数学运算
  • Ubuntu 22.04上升级npm版本
  • 升级node@22后运行npm install报错 distutils not found
  • canvas(三)-动画3d
  • iisARR负均衡
  • 【IDEA问题】springboot本地启动应用报错:程序包不存在;找不到符号
  • 在react项目中使用andt日期组件,选择周和季度,直接获取所对应的日期区间
  • C++ HTTP框架推荐
  • 人脸识别备案开启安全防护模式!紧跟《办法》!
  • uni-app学习笔记九-vue3 v-for指令
  • redis Pub/Sub 简介 -16 (PUBLISH、SUBSCRIBE、PSUBSCRIBE)
  • 【C++20新特性】ranges::sort()使用方法,优势,注意点
  • 【1004. 最大连续1的个数 III】
  • ai之pdf解析工具 PPStructure 还是PaddleOCR
  • 火山引擎火山云带宽价格
  • 【工作流】Fastgpt配置豆包模型-火山引擎
  • Github 2025-05-22Go开源项目日报 Top10
  • 【COMPUTEX 2025观察】NVIDIA开放NVLink:一场重构AI算力版图的“阳谋“
  • Go File多终端数据同步技术全解:跨设备数据管理实战指南与复杂场景处理过程