更新记录

1.0.0（2025-08-01） 下载此版本

• ✅ 单元格合并：支持跨行跨列的单元格合并
• ✅ 自适应列宽：根据内容自动计算最优列宽
• ✅ 响应式布局：支持容器宽度自适应和横向滚动
• ✅ 自定义样式：支持背景色、文字样式等自定义配置
• ✅ 高性能渲染：使用 CSS Grid 布局，渲染性能优异
• ✅ 跨平台兼容：基于 UniApp，支持多端运行

平台兼容性

uni-app(4.06)

Merge Table 合并表格组件

一个基于 Vue 3 和 UniApp 的智能表格组件，支持单元格合并、自适应列宽、响应式布局等功能。

功能特性

• ✅ 单元格合并：支持跨行跨列的单元格合并
• ✅ 自适应列宽：根据内容自动计算最优列宽
• ✅ 响应式布局：支持容器宽度自适应和横向滚动
• ✅ 自定义样式：支持背景色、文字样式等自定义配置
• ✅ 高性能渲染：使用 CSS Grid 布局，渲染性能优异
• ✅ 跨平台兼容：基于 UniApp，支持多端运行

基础用法

<template>
  <merge-table :data="tableData" />
</template>

<script setup>
  import MergeTable from '@/components/merge-table/merge-table.vue';

  const tableData = {
    columns: [
      { key: 'name', title: '姓名', width: 100 },
      { key: 'age', title: '年龄', width: 80 },
      { key: 'city', title: '城市', width: 120 }
    ],
    data: [
      { name: '张三', age: 25, city: '北京' },
      { name: '李四', age: 30, city: '上海' },
      { name: '王五', age: 28, city: '广州' }
    ]
  };
</script>

合并单元格用法

<template>
  <merge-table :data="tableData" />
</template>

<script setup>
  const tableData = {
    columns: [
      { key: 'name', title: '姓名', width: 100 },
      { key: 'age', title: '年龄', width: 80 },
      { key: 'city', title: '城市', width: 120 }
    ],
    data: [
      { name: '张三', age: 25, city: '北京' },
      { name: '李四', age: 30, city: '上海' },
      { name: '王五', age: 28, city: '广州' }
    ],
    merge: [
      {
        row: 0, // 起始行索引
        col: 0, // 起始列索引
        rowspan: 2, // 合并行数
        colspan: 1 // 合并列数
      }
    ]
  };
</script>

自定义样式用法

<template>
  <merge-table :data="tableData" />
</template>

<script setup>
  const tableData = {
    columns: [
      {
        key: 'name',
        title: '姓名',
        width: 100,
        backgroundColor: '#409eff', // 背景色
        valueStyle: {
          // 值样式
          color: '#fff',
          fontWeight: 'bold'
        }
      },
      { key: 'age', title: '年龄', width: 80 },
      { key: 'city', title: '城市', width: 120 }
    ],
    data: [
      { name: '张三', age: 25, city: '北京' },
      { name: '李四', age: 30, city: '上海' },
      { name: '王五', age: 28, city: '广州' }
    ]
  };
</script>

API 文档

Props

Data 结构

interface TableData {
  columns: Column[]; // 列配置
  data: RowData[]; // 行数据
  merge?: MergeItem[]; // 合并配置（可选）
}

interface Column {
  key: string; // 列标识
  title: string; // 列标题
  width?: number | string; // 列宽度（可选）
  backgroundColor?: string; // 背景色（可选）
  valueStyle?: CSSProperties; // 值样式（可选）
}

interface RowData {
  [key: string]: any; // 动态键值对
}

interface MergeItem {
  row: number; // 起始行索引
  col: number; // 起始列索引
  rowspan: number; // 合并行数
  colspan: number; // 合并列数
}

列配置详解

width 属性

• 数字：固定像素宽度，如 100
• 字符串：CSS 宽度值，如 '100px'、'20%'
• 不设置：自动根据内容计算宽度

backgroundColor 属性

设置列的背景色，当设置背景色时，文字会自动变为白色以提高可读性。

valueStyle 属性

自定义单元格内容的样式，支持所有 CSS 属性。

合并单元格配置

merge 数组中的每个对象定义了一个合并区域：

• row：合并起始行的索引（从0开始）
• col：合并起始列的索引（从0开始）
• rowspan：向下合并的行数
• colspan：向右合并的列数

样式定制

组件使用 SCSS 编写，主要样式类：

• .custom-table：表格容器
• .table-header：表头区域
• .header-cell：表头单元格
• .table-body：表格主体
• .body-cell：表格单元格

自定义样式示例

.custom-table {
  // 自定义表格边框
  border: 2px solid #409eff;
  border-radius: 8px;

  .table-header {
    // 自定义表头样式
    background-color: #f0f9ff;

    .header-cell {
      // 自定义表头单元格样式
      font-weight: bold;
      color: #1e40af;
    }
  }

  .table-body {
    .body-cell {
      // 自定义单元格样式
      font-size: 14px;
      color: #374151;
    }
  }
}

性能优化

1. CSS Grid 布局：使用现代 CSS Grid 实现高性能的表格布局
2. 智能渲染：只渲染可见的单元格，避免重复渲染合并区域
3. 响应式计算：根据容器宽度智能调整列宽分配
4. 防抖优化：数据变化时使用 nextTick 避免频繁重绘

注意事项

1. 合并单元格限制：

   • 合并区域不能重叠
   • 合并起始单元格必须是可见的
   • 建议合理使用合并，避免过度复杂的布局

2. 列宽计算：

   • 自动计算的列宽范围：80px - 400px
   • 字符宽度按 16px 计算
   • 包含 24px 内边距和 2px 边框

3. 响应式行为：

   • 当表格总宽度小于容器宽度时，列宽会按比例分配
   • 当表格总宽度大于容器宽度时，启用横向滚动

4. UniApp 兼容性：

   • 组件基于 UniApp 开发，支持多端运行
   • 使用 uni.createSelectorQuery 获取容器尺寸

更新日志

v1.0.0 (2025-07-31)

• ✨ 初始版本发布
• ✨ 支持基础表格功能
• ✨ 支持单元格合并
• ✨ 支持自适应列宽
• ✨ 支持自定义样式
• ✨ 支持响应式布局

许可证

MIT License