当前位置：首页 > VUE

vue表格实现单选

2026-03-28 19:35:17VUE

实现 Vue 表格单选功能

在 Vue 中实现表格单选功能可以通过以下方法完成，核心思路是绑定选中状态并监听用户操作。

方法一：使用 v-model 绑定选中行

通过 v-model 绑定一个变量存储当前选中行的数据，结合 @click 事件切换选中状态。

vue表格实现单选

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      selectedRow: null
    };
  }
};
</script>

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

方法二：使用计算属性动态判断选中状态

通过计算属性或方法判断当前行是否为选中状态，适用于需要复杂逻辑的场景。

vue表格实现单选

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      selectedRow: null
    };
  },
  methods: {
    selectRow(item) {
      this.selectedRow = item;
    },
    isSelected(item) {
      return this.selectedRow === item;
    }
  }
};
</script>

方法三：结合第三方表格组件（如 Element UI）

如果使用 Element UI 的 el-table 组件，可以直接利用其内置的单选功能。

<template>
  <el-table
    :data="tableData"
    @current-change="handleCurrentChange"
    highlight-current-row>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log('当前选中行:', val);
    }
  }
};
</script>