Vue 单选行 radio

配置 type: 'radio' 列实现行单选（互斥），通过 onRadioChange 监听、ref 上的 getSelectedRadio() / setSelectedRadio() 读写选中行。

使用的 API

type Column = {
  key: string;  // 列标识(必填)
  title: string;  // 列标题(必填)
  width: number;  // 列宽(必填)
  type: 'radio';  // 特殊列类型：单选列
  fixed?: 'left' | 'right';  // 冻结列
}

type Options = {
  list: T[];  // 数据列表
  itemKey: string;  // 行唯一标识字段名
  estimatedSize: number;  // 行预估高度(px)
  onRadioChange?: (row: T) => void;  // 选中行变化回调
}

// 实例方法（ref 上调用）
tableRef.value?.getSelectedRadio();
tableRef.value?.setSelectedRadio(rowKey);  // 传 null 清除

示例

微应用尚未挂载。

源码

点击查看源码

<template>
  <div class="demo-wrapper">
    <h3 class="demo-title">Vue 单选行 radio</h3>
    <div class="virt-table-controls">
      <button type="button" class="virt-table-btn virt-table-btn-primary" @click="getSelected">
        获取当前选中
      </button>
      <button type="button" class="virt-table-btn" @click="clearSelected">清除</button>
      <span class="demo-note">{{ out }}</span>
    </div>
    <div style="width: 620px; height: 480px" class="demo-container">
      <VirtTableVue ref="tableRef" :columns="columns" :options="options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VirtTableVue, type VueTableColumn } from '@virt-table/vue';
import { faker } from '@faker-js/faker';
import type { VirtTableVueInstance } from '../../virt-table-ref';

interface Row extends Record<string, unknown> {
  id: number;
  name: string;
  city: string;
}

const columns: VueTableColumn<Row>[] = [
  { key: 'radio', title: '', width: 50, type: 'radio', fixed: 'left' },
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: '姓名', width: 220 },
  { key: 'city', title: '城市', width: 220 },
];

const list: Row[] = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: faker.person.fullName(),
  city: faker.location.city(),
}));

const tableRef = ref<VirtTableVueInstance | null>(null);
const out = ref('未选中');

const options = {
  list,
  itemKey: 'id',
  estimatedSize: 40,
  buffer: 6,
  border: true,
  onRadioChange: (row: Record<string, unknown>) => {
    out.value = `选中：${(row as Row).name}`;
  },
};

const getSelected = () => {
  const r = tableRef.value?.getSelectedRadio() as Row | null | undefined;
  out.value = r ? `当前：${r.name}（id=${r.id}）` : '未选中';
};

const clearSelected = () => {
  tableRef.value?.setSelectedRadio(null);
  out.value = '未选中';
};
</script>