当前位置：首页 > VUE

vue 实现表格单选

2026-01-08 05:52:34VUE

实现表格单选的方法

在Vue中实现表格单选功能可以通过多种方式完成，以下是几种常见的实现方法：

使用v-model绑定选中项

通过v-model绑定一个变量来记录当前选中的行数据。当用户点击某一行时，更新该变量的值。

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id" 
        @click="selectedItem = item"
        :class="{ 'selected': selectedItem === item }">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      selectedItem: null
    }
  }
}
</script>

<style>
.selected {
  background-color: #f0f0f0;
}
</style>

使用radio按钮实现单选

在表格的每一行添加radio按钮，通过v-model绑定同一个变量实现单选效果。

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td><input type="radio" v-model="selectedId" :value="item.id"></td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      selectedId: null
    }
  }
}
</script>

使用第三方表格组件实现

如果使用Element UI等UI框架，可以直接利用其提供的单选功能。

<template>
  <el-table
    :data="tableData"
    @current-change="handleCurrentChange"
    highlight-current-row>
    <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 }
      ],
      currentRow: null
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  }
}
</script>

自定义单选逻辑

通过维护一个selectedId变量，在点击时更新该变量实现单选。

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id" 
        @click="selectItem(item.id)"
        :class="{ 'selected': selectedId === item.id }">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      selectedId: null
    }
  },
  methods: {
    selectItem(id) {
      this.selectedId = id;
    }
  }
}
</script>