Vue 列显隐 / 列设置

列支持 hidden（默认隐藏）与 hideable: false（禁止在面板切换）。装载 vtColumnPanel() 后用 ref 上的 toggleColumnPanel() 打开列设置面板，或用 setColumnVisible(key, visible) 编程控制。

使用的 API

import { VirtTableVue, vtColumnPanel } from '@virt-table/vue';

const columns = [
  { key: 'id', title: 'ID', width: 80, hideable: false },  // 不允许隐藏
  { key: 'email', title: '邮箱', width: 240, hidden: true },  // 默认隐藏
];

const options = { plugins: [vtColumnPanel()], list, itemKey: 'id', estimatedSize: 40 };

// 实例方法（ref 上调用）；面板要贴着触发按钮定位，把按钮作为 anchor 传进去
tableRef.value?.toggleColumnPanel(e.currentTarget as HTMLElement);
tableRef.value?.setColumnVisible('job', false);
tableRef.value?.getVisibleColumns();

示例

微应用尚未挂载。

源码

点击查看源码

<template>
  <div class="demo-wrapper">
    <h3 class="demo-title">Vue 列显隐 / 列设置</h3>
    <div class="virt-table-controls">
      <button
        type="button"
        class="virt-table-btn virt-table-btn-primary"
        @click="togglePanel"
      >
        列设置
      </button>
      <button type="button" class="virt-table-btn" @click="tableRef?.setColumnVisible('job', false)">
        隐藏「职位」
      </button>
      <button type="button" class="virt-table-btn" @click="tableRef?.setColumnVisible('email', true)">
        显示「邮箱」
      </button>
      <span class="demo-note">ID 列不可隐藏；邮箱列默认隐藏</span>
    </div>
    <div style="width: 760px; height: 460px" 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, vtColumnPanel } 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;
  age: number;
  city: string;
  job: string;
  email: string;
}

const columns: VueTableColumn<Row>[] = [
  { key: 'id', title: 'ID', width: 80, hideable: false },
  { key: 'name', title: '姓名', width: 160 },
  { key: 'age', title: '年龄', width: 120 },
  { key: 'city', title: '城市', width: 160 },
  { key: 'job', title: '职位', width: 200 },
  { key: 'email', title: '邮箱', width: 240, hidden: true },
];

const list: Row[] = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: faker.person.fullName(),
  age: faker.number.int({ min: 18, max: 60 }),
  city: faker.location.city(),
  job: faker.person.jobTitle(),
  email: faker.internet.email(),
}));

const options = {
  list,
  itemKey: 'id',
  estimatedSize: 40,
  buffer: 6,
  border: true,
  plugins: [vtColumnPanel()],
};

const tableRef = ref<VirtTableVueInstance | null>(null);

// 面板要贴着触发按钮定位，所以把按钮本身作为 anchor 传进去
const togglePanel = (e: MouseEvent) => {
  tableRef.value?.toggleColumnPanel(e.currentTarget as HTMLElement);
};
</script>