elementui 表格单选以及如何将element Radio组件label绑定的值不显示

最新推荐文章于 2024-08-08 15:26:32 发布

一只快乐的小咩咩

最新推荐文章于 2024-08-08 15:26:32 发布

阅读量1.6k

点赞数 3

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/miem_yang/article/details/118551983

版权

vue 专栏收录该内容

18 篇文章

订阅专栏

"这篇博客介绍了如何在 Vue.js 应用中结合 Element UI 框架，利用表格（el-table）和单选按钮（Radio）组件实现数据展示与用户交互。关键点包括：1) 在表格列中嵌入 Radio，通过 v-model 绑定 orgValue 参数；2) Radio 的 label 属性需绑定 operNo 值，以便传递所需数据；3) 注意在不需要显示 label 值时，使用 {{''}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果你想要实现如下的效果图就看看或许对你有帮助
在这里插入图片描述
详情请看如下代码
下面展示一些 内联代码片。

// 表格部分代码
 <el-table
    :data="operList"
    fit
    show-header
    style="width: 100%">
    <el-table-column label="选择" width="50">
     <template scope="scope">
      <el-radio :label="scope.row.operNo" v-model="orgValue">{{''}}</el-radio>// {{''}}划重点 如果不想label绑定的值显示请置空
    </template>
    </el-table-column>
    <el-table-column prop="name"  label="操作员名称">
    </el-table-column>
    <el-table-column prop="name" label="操作员机构">
  </el-table>
  // 有几点我觉得有必要解释一下
  // 1.不想显示label绑定的值请务必自己手动添加{{''}}
  // 2.Radio组件的lable绑定的值即为你需要传给后端的值（operNo）
  // 3.Radio组件的v-model为自己手动定义的 传参的时候只需要直接xxx:this.orgValue即可
  // 在我的开发页面中也做了一个模糊查询框 如果有需要可以留言我再添加相应代码