vxe-table 怎么选择
时间: 2025-07-01 18:58:47 浏览: 5
在 `vxe-table` 中实现行选择或数据选择功能,主要依赖于其内置的列类型和相关配置项。以下介绍几种常见的实现方式:
### 单选功能
若需实现单选功能,可以通过设置 `<vxe-table-column>` 的 `type` 属性为 `"radio"` 来启用单选框列[^1]。示例代码如下:
```html
<vxe-table :data="tableData">
<vxe-table-column type="radio" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
```
在此配置下,每行会显示一个单选框,用户只能选择一行。
### 多选功能
对于多选场景,将 `<vxe-table-column>` 的 `type` 设置为 `"checkbox"` 即可实现多选功能。该方式允许用户同时选择多行数据:
```html
<vxe-table :data="tableData">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
```
### 高亮当前选中行
除了使用复选框进行选择外,还可以通过 `row-config` 配置项来实现点击行高亮效果。例如,启用点击行时高亮当前行的功能:
```html
<vxe-table :data="tableData" :row-config="{ isCurrent: true }">
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
```
以上配置会使得用户点击某一行时,该行自动被高亮显示,从而增强交互体验。
### 获取选中行数据
无论是单选还是多选,均可通过 `vxe-table` 提供的方法获取当前选中的行数据。例如,在 Vue 中可以使用 `ref` 来调用方法:
```vue
<template>
<div>
<vxe-table ref="xTable" :data="tableData" :row-config="{ isCurrent: true }">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
<button @click="getSelectedRows">获取选中行</button>
</div>
</template>
<script>
export default {
methods: {
getSelectedRows() {
const $table = this.$refs.xTable;
const selectedRows = $table.getCheckboxRecords(); // 获取多选记录
console.log('选中的行数据:', selectedRows);
}
}
};
</script>
```
###
阅读全文
相关推荐


















