vue表格实现单选

实现 Vue 表格单选功能

在 Vue 中实现表格单选功能可以通过以下方法完成，假设使用的是 Element UI 的表格组件。

使用 el-table 的 highlight-current-row 属性

启用 highlight-current-row 属性可以让表格高亮当前选中的行，结合 @current-change 事件可以获取当前选中的行数据。

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <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: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      currentRow: null
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    }
  }
}
</script>

自定义单选逻辑

如果需要对单选逻辑进行更精细的控制，可以通过手动管理选中状态实现。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-radio
          v-model="selectedRow"
          :label="scope.row"
          @change="handleSelect(scope.row)">
          选择
        </el-radio>
      </template>
    </el-table-column>
  </el-table>
</template>

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

使用 @row-click 事件

通过监听行点击事件，可以手动设置当前选中行。

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    style="width: 100%">
    <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: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      selectedRow: null
    }
  },
  methods: {
    handleRowClick(row) {
      this.selectedRow = row
    }
  }
}
</script>

使用 v-model 绑定选中行

如果使用自定义表格组件，可以通过 v-model 绑定选中行数据。

<template>
  <custom-table
    :data="tableData"
    v-model="selectedRow">
    <template #columns>
      <custom-column prop="name" label="姓名"></custom-column>
      <custom-column prop="age" label="年龄"></custom-column>
    </template>
  </custom-table>
</template>

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

以上方法可以根据具体需求选择适合的方式实现 Vue 表格的单选功能。