当前位置：首页 > VUE

vue表格实现单选框

2026-02-09 19:08:37VUE

实现 Vue 表格单选框的方法

在 Vue 中实现表格单选框可以通过自定义逻辑或结合第三方组件库完成。以下是两种常见实现方式：

使用原生 HTML 和 Vue 数据绑定

通过 v-model 绑定单选值，结合 v-for 渲染表格行：

<template>
  <table>
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>
          <input 
            type="radio" 
            v-model="selectedItem" 
            :value="item.id"
            @change="handleSelect"
          >
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  methods: {
    handleSelect() {
      console.log('选中项ID:', this.selectedItem);
    }
  }
}
</script>

使用 Element UI 组件库

若项目中使用 Element UI，可直接使用其表格单选功能：

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleSelect"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  methods: {
    handleSelect(val) {
      console.log('选中行数据:', val);
    }
  }
}
</script>