vue前端table实现单选

实现 Vue 表格单选功能

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

使用 v-model 和计算属性

通过绑定 v-model 到当前选中的行数据，结合计算属性实现单选逻辑。

<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" 
            :value="item" 
            v-model="selectedRow"
          />
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

使用自定义点击事件

通过点击事件手动控制选中状态，适用于更复杂的交互场景。

<template>
  <table>
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr 
        v-for="item in tableData" 
        :key="item.id"
        @click="selectRow(item)"
        :class="{ 'active': selectedRow && selectedRow.id === item.id }"
      >
        <td>
          <input 
            type="radio" 
            :checked="selectedRow && selectedRow.id === item.id"
          />
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 28 }
      ],
      selectedRow: null
    }
  },
  methods: {
    selectRow(row) {
      this.selectedRow = row
    }
  }
}
</script>

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

使用第三方组件库

如果项目中使用了 Element UI 或 Ant Design Vue 等组件库，可以直接使用其提供的单选表格功能。

以 Element 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 },
        { id: 3, name: '王五', age: 28 }
      ]
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log('当前选中行:', val)
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，可以通过 Vuex 集中管理选中状态。

// store.js
export default new Vuex.Store({
  state: {
    selectedRow: null
  },
  mutations: {
    setSelectedRow(state, row) {
      state.selectedRow = row
    }
  }
})

<template>
  <table>
    <tr 
      v-for="item in tableData" 
      :key="item.id"
      @click="$store.commit('setSelectedRow', item)"
      :class="{ 'active': $store.state.selectedRow && $store.state.selectedRow.id === item.id }"
    >
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

以上方法均可实现 Vue 表格的单选功能，选择哪种方式取决于项目需求和复杂度。对于简单场景，第一种方法足够；复杂交互建议使用自定义事件；使用组件库可以快速实现标准功能；大型应用推荐使用状态管理。