@wzhack110/vue-table-plugin

@wzhack110/vue-table-plugin

云翔科技内部使用的表格组件插件，包含表格核心组件、搜索组件、导出功能和导入功能。

快速开始

安装

方式一：从Gitee仓库安装（推荐，无需配置）

npm install git+https://gitee.com/yunxiang_4/change-vue-table-plugin.git
# 或
yarn add git+https://gitee.com/yunxiang_4/change-vue-table-plugin.git
# 或
pnpm add git+https://gitee.com/yunxiang_4/change-vue-table-plugin.git

方式二：直接使用包安装（推荐）

npm install @wzhack110/vue-table-plugin
# 或
yarn add @wzhack110/vue-table-plugin
# 或
pnpm add @wzhack110/vue-table-plugin

基础使用

<template>
  <div class="table-container">
    <!-- 搜索组件 -->
    <TableSearch 
      v-bind="state.tableData" 
      @search="onSearch" 
      @editRow="handleAdd"
      :exportParams="exportParams" 
      export_position="your_module"
      :multipleSelection="multipleSelection" 
      @refresh="getTableData()" 
      :api-methods="apiMethods" 
    />
    
    <!-- 表格组件 -->
    <Table 
      ref="tableRef" 
      v-bind="state.tableData" 
      @selection-change="handleSelectionChange" 
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { TableComponent as Table, SearchComponent as TableSearch } from '@wzhack110/vue-table-plugin';
import '@wzhack110/vue-table-plugin/dist/style.css';
import { getTablePluginApiMethods } from '/@/utils/tablePluginApi';

// API方法配置（只需一行代码）
const apiMethods = getTablePluginApiMethods();

const tableRef = ref();
const multipleSelection = ref([]);
const exportParams = ref({});

const state = reactive({
  tableData: {
    data: [],
    header: [
      {
        key: 'code',
        title: '编码',
        type: 'text',
        colWidth: '120',
        isCheck: true,
        fixed: 'left',
      },
      {
        key: 'name',
        title: '名称',
        type: 'text',
        colWidth: '150',
        isCheck: true,
      },
    ],
    config: {
      isSelection: true,
      isSerialNo: true,
      isSwitchPage: true,
      total: 0,
    },
  },
});

const onSearch = (params: any) => {
  getTableData();
};

const getTableData = () => {
  // 调用接口获取数据
};

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
</script>

导出组件

核心组件

• TableComponent - 表格核心组件
• TableVirtualized - 虚拟滚动表格组件
• SearchComponent - 搜索组件（包含导入导出功能）
• ExportComponent - 导出组件
• ImportComponent - 导入组件

类型声明

插件提供完整的TypeScript类型声明：

import type {
  // 表格配置类型
  TableColumnItem,
  TableConfig,
  TableData,
  TableColumnTypes,
  
  // 导出字段类型
  ExportFieldsDeclaration,
  ExportFieldGroup,
  ExportFieldConfig,
} from '@wzhack110/vue-table-plugin';

工具函数

import {
  // 表格配置工具
  createTableColumn,
  createDefaultTableConfig,
  
  // 导出字段工具
  transformApiResponseToExportFields,
  
  // 示例配置
  customerTableColumnsExample,
  customerExportFieldsExample,
} from '@wzhack110/vue-table-plugin';

使用示例

1. 使用工具函数快速配置

import { createTableColumn, createDefaultTableConfig } from '@wzhack110/vue-table-plugin';

const header = [
  createTableColumn('code', '编码', {
    colWidth: '120',
    fixed: 'left',
  }),
  createTableColumn('name', '名称', {
    colWidth: '150',
  }),
  createTableColumn('status', '状态', {
    type: 'tag',
    activeValue: 1,
    inactiveValue: 0,
  }),
];

const config = {
  ...createDefaultTableConfig(),
  isSelection: true,
};

2. 配置导出字段

import type { ExportFieldsDeclaration } from '@wzhack110/vue-table-plugin';

const exportFields: ExportFieldsDeclaration = [
  {
    model: 'customer',
    export_name: '客户信息',
    fields: {
      customer_code: '客户编码',
      name_full: '客户全称',
    },
    must: ['customer_code'],
  },
];

3. 不同列类型示例

// 文本列
{ key: 'name', title: '名称', type: 'text' }

// 标签列
{ 
  key: 'status', 
  title: '状态', 
  type: 'tag',
  activeValue: 1,
  inactiveValue: 0,
  activeText: '启用',
  inactiveText: '停用'
}

// 列表列
{
  key: 'category',
  title: '分类',
  type: 'list',
  list: [
    { label: '分类A', value: 'a' },
    { label: '分类B', value: 'b' },
  ]
}

// 图片列
{ key: 'avatar', title: '头像', type: 'image', width: 50, height: 50 }

// JSON列
{ key: 'data', title: '数据', type: 'json' }

完整文档

详细的类型声明和配置指南请查看：

• 类型声明与配置指南 - 完整的类型说明和使用示例
• 导出字段配置示例 - 导出字段配置示例
• 表格配置示例 - 表格配置示例

API方法配置

所有模块共用统一的API方法配置：

import { getTablePluginApiMethods } from '/@/utils/tablePluginApi';

const apiMethods = getTablePluginApiMethods();

包含的API方法：

• exportRelevanceList - 获取导出字段列表
• exportRelevanceSaveDemo - 保存导出模板
• exportRelevanceLoad - 加载导出模板
• exportRelevanceDelete - 删除导出模板
• exportRelevanceExport - 导出数据
• exportRelevanceBreakpointContinue - 断点续传导出
• exportCheckStatus - 检查导出状态
• exportRelevanceImport - 导入数据
• uploadFile - 上传文件
• exportRelevanceDemos - 下载导入模板

列类型说明

支持22种列类型：

技术支持

如有问题，请联系开发团队。