vue-＞表格+单选

最新推荐文章于 2025-06-03 17:06:43 发布

萤火森林

最新推荐文章于 2025-06-03 17:06:43 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/Repuryee/article/details/119931424

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍如何在前端使用Element UI创建一个表格形式的单选选择器，用户可以通过点击选择时间项，'确定'和'取消'按钮配合事件处理，实现数据的动态绑定。主要涉及el-radio组件的使用和表单事件的绑定。

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

一、页面效果

单选切换选中的表单项，“确定”和“取消”按钮根据需要添加，绑定目标事件即可
在这里插入图片描述

二、页面组件及结构

 <el-form>
        <el-form-item>
          <el-table
            border
            :data="timeOptions"
            style="width: 100%"
            refs="selectTimeTable"
            @row-click="showRow"
            @current-change="handleCurrentChange"
            >
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-radio v-model="selectRadio" :label="scope.$index">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="时间"
              >
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      ......

注意：el-radio标签中label绑定的是索引（index），再el-radio标签中间加上则不会出现索引值了

三、数据：

data: {
  timeOptions: [{
    id: 1,
    time: "2021-08-20_23:40:24"
  }, {
    id: 2,
    time: "2021-08-20_23:25:24"
  }, {
    id: 3,
    time: "2021-08-20_23:10:24"
  }],
  selectRadio: 0 // 默认选中第一行数据
}

四、方法：

methods: {
 showRow (row) {
    this.selectRadio= this.timeOptions.indexOf(row)
 },
 getCurrentRow (val) {
    // console.log(val) // val为当前选中的行号
 },
 handleCurrentChange (currentRow) { // 选中行事件
    // currentRow 为当前选中行的数据，可用于其他数据的赋值修改等
    this.getCurrentRow(this.timeOptions.indexOf(currentRow))
 },
}