当前位置: 首页 > 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.dtcms.com/a/205680.html

相关文章:

  • 力扣HOT100之二叉树:124. 二叉树中的最大路径和
  • 鸿蒙Flutter实战:21-混合开发详解-1-概述
  • 力扣-无重复字符的最长子串
  • 手机入网时长查询接口:精准风控与用户运营的智能利器
  • 深入理解 PlaNet(Deep Planning Network):基于python从零实现
  • ffmpeg 转换视频格式
  • 【MySQL成神之路】MySQL插入、删除、更新操作汇总
  • 掌握正则表达式:从基础语法到工程实践
  • 使用gradio创建LLM模型聊天Demo
  • 如何在 Mac M4 芯片电脑上卸载高版本的 Node.js
  • 【论文阅读】——AN EXPRESSIVE REPRESENTATION OF GENERAL 3D SHAPES
  • 网页 CSS美化(详解)
  • 机器学习圣经PRML作者Bishop20年后新作中文版出版!
  • python 绘制3D平面图
  • 【前端】每日一道面试题4:什么是CSS容器查询(Container Queries)?与媒体查询有何区别?
  • CSS:vertical-align用法以及布局小案例(较难)
  • Spark SQL、Hive SQL运行流程解析及对比
  • Linux环境基础开发工具->vim
  • Paimon和Hive相集成
  • Java的Filter与Spring的Interceptor的比较
  • vim以及vi编辑器常用快捷键指令
  • DDS与PLL技术
  • [Harmony]实现JSON与类的双向转换
  • OpenCV CUDA模块图像过滤------用于创建一个最小值盒式滤波器(Minimum Box Filter)函数createBoxMinFilter()
  • 第三十二天打卡
  • FFmpeg 超级详细安装与配置教程(Windows 系统)
  • 高等数学-积分
  • Ubuntu18.04安装ros
  • PG Craft靶机复现 宏macro攻击
  • flask允许跨域访问如何设置