TableView 表格

基于 Element Plus 的低代码表格组件，支持数据展示、增删改查、导出、打印等功能。

基础用法

<script setup lang="ts">
import { reactive } from 'vue';
import TableView from 'vancone-console-web-component';

const model = reactive<DataModel>({
  api: '/api/data-sources',
  route: 'data-sources',
  tableConfig: {
    editPageRoutePath: '/data-sources/detail',
  },
  fields: [
    {
      prop: 'name',
      label: '数据源名称',
      tableColumn: { link: true }
    },
    {
      prop: 'type',
      label: '类型',
    },
    {
      prop: 'status',
      label: '状态',
    }
  ]
});
</script>

<template>
  <TableView :model="model" />
</template>

下拉列表

表格支持显示下拉字段的 label 值，使用 formItem.select 配置：

const model = reactive<DataModel>({
  api: '/api/data-sources',
  fields: [
    {
      prop: 'type',
      label: '数据源类型',
      formItem: {
        type: 'select',
        select: {
          options: [
            { label: 'MySQL', value: 'mysql' },
            { label: 'PostgreSQL', value: 'postgresql' },
            { label: 'MongoDB', value: 'mongodb' }
          ]
        }
      }
    }
  ]
});

路由跳转

支持两种路由跳转方式：

默认链接跳转

{
  prop: 'name',
  label: '名称',
  tableColumn: { link: true }  // 跳转到 /{route}/detail?id={id}
}

自定义路由跳转

{
  prop: 'name',
  label: '名称',
  tableColumn: {
    routerLink: '/custom/path/{id}'  // {id} 会被替换为实际 ID
  }
}

自定义操作列

const model = reactive<DataModel>({
  api: '/api/users',
  tableConfig: {
    operations: [
      {
        label: 'common.table.view',
        functions: {
          click: (index, row) => {
            console.log('查看', row.id);
          }
        }
      },
      {
        label: '启用',
        functions: {
          click: (index, row) => {
            // 启用操作
          }
        }
      }
    ]
  },
  fields: [...]
});

值转换显示

函数转换

{
  prop: 'status',
  label: '状态',
  tableColumn: {
    functions: {
      transformValue: (value) => {
        return value === 'active' ? '启用' : '禁用';
      }
    }
  }
}

映射转换

{
  prop: 'status',
  label: '状态',
  tableColumn: {
    transformValueMappings: [
      { value: 'active', label: '启用' },
      { value: 'inactive', label: '禁用' }
    ]
  }
}

显示选项配置

通过 tableConfig.display 控制表格显示元素：

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    display: {
      pane: false,          // 是否显示白色背景面板
      searchBox: false,    // 是否显示搜索框
      pagination: false,    // 是否显示分页
      advancedSearch: false, // 是否显示高级搜索按钮
      fileTaskButton: false  // 是否显示导入导出按钮
    }
  },
  fields: [...]
});

打印功能

点击工具栏的"打印"按钮，打印选中的行数据：

// 打印时表格会自动生成包含选中数据的 iframe

导出功能

点击导入导出下拉菜单中的"导出查询结果"：

const model = reactive<DataModel>({
  api: '/api/data',
  // 导出请求将发送到 {api}/export
});

只读模式

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    readOnly: true  // 隐藏创建、删除、编辑等操作按钮
  },
  fields: [...]
});

选择模式

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    selectMode: true  // 显示查看选中项的复选框
  },
  fields: [...]
});

自定义 CRUD 函数

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    functions: {
      create: () => {
        // 自定义创建逻辑
        dialogVisible.value = true;
      },
      delete: (index, row) => {
        // 自定义删除逻辑
      },
      batchDelete: (selectedItems) => {
        // 自定义批量删除逻辑
      }
    }
  },
  fields: [...]
});

标签类型

{
  prop: 'category',
  label: '分类',
  tableColumn: { type: 'tag' }  // 使用 el-tag 显示
}

分页配置

支持 [10, 20, 50, 100] 四种分页大小选择。

查询参数

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    queryParams: {
      status: 'active',
      type: 'mysql'
    }
  },
  fields: [...]
});

工具提示

const model = reactive<DataModel>({
  api: '/api/data',
  tableConfig: {
    tooltip: 'common.table.dataSourceTooltip'  // 在工具栏显示提示图标
  },
  fields: [...]
});

DataModel 属性

TableConfig 属性

DisplayOptions 属性

Field 属性

TableColumnConfig 属性

FormItemConfig 属性

SelectConfig 属性

IOperationItem 属性

ILabel 属性

组件暴露方法