更新记录

1.4（2025-12-04） 下载此版本

• ✅ 动态横向合并单元格: 横向列合并单元格

1.3.6（2025-11-24） 下载此版本

修复bug，添加第一页的完成加载方法

1.3.5（2025-11-24） 下载此版本

修复bug

平台兼容性

uni-app

其他

sl-table

一个支持Vue2和Vue3的高性能表格组件

特性

• ✅ Vue2/Vue3兼容: 同时支持Vue2和Vue3环境
• ✅ 表头合并: 支持多级表头和单元格合并
• ✅ 单元格合并: 支持行合并和列合并
• ✅ 自定义插槽: 支持单元格自定义内容
• ✅ 响应式: 自适应不同屏幕尺寸
• ✅ 虚拟滚动: 支持大量数据的分页加载
• ✅ 样式自定义: 支持自定义单元格样式
• ✅ 横向滚动: 支持表格横向滚动，自动处理宽度计算
• ✅ 固定列: 支持左侧和右侧固定列，滚动时显示阴影提示
• ✅ 动态横向合并单元格: 横向列合并单元格

兼容性

安装

# 将sl-table文件夹复制到项目的uni_modules目录下，插件中有examples文件夹，可查看示例

基础用法

Vue3风格（推荐）

<template>
  <sl-table 
    :columns="columns" 
    :tableData="tableData"
    @cell-click="handleCellClick"
    :enableLoadMore="true"
    @load-more="handleLoadMore"
  >
    <!-- Vue3自定义插槽 -->
    <template #customSlot="{ row, cell }">
      <view class="custom-content">
        {{ row.customField }}
      </view>
    </template>
     <template #empty>
      <view class="empty-content">
        暂无数据插槽展示
      </view>
    </template>
  </sl-table>
</template>

Vue2风格

<template>
  <sl-table 
    :columns="columns" 
    :tableData="tableData"
    @cell-click="handleCellClick"
    :enableLoadMore="true"
    @load-more="handleLoadMore"
  >
    <!-- VUE2自定义插槽 -->
      <template #customSlot="{ row, cell }">
        <view class="custom-slot">
          <text class="highlight">{{ row.customField }}</text>
        </view>
      </template>
  </sl-table>
</template>

<script>
   export default {
    //```你的代码```
    methods:{
      handleLoadMore({pageNum,done}){
        //进行分页获取
        let isLastPage = true  //是否是最后一页
        done(isLastPage)  //结束后一定要执行这个方法，isLastPage默认为false
      }
    }
   }

</script>

固定列

支持左侧和右侧固定列，在横向滚动时固定列会保持可见，并显示阴影提示：

columns: [
  {
    label: '姓名',
    prop: 'name',
    width: '100px',
    fixed: 'left'  // 固定在左侧
  },
  {
    label: '年龄',
    prop: 'age',
    width: '80px'
    // 不固定，可横向滚动
  },
  {
    label: '操作',
    prop: 'action',
    width: '100px',
    fixed: 'right'  // 固定在右侧
  }
]

固定列特性：

• 支持 fixed: 'left' 左侧固定
• 支持 fixed: 'right' 右侧固定
• 横向滚动时，固定列会显示阴影效果，提示用户有固定列存在
• 左侧固定列在滚动后显示右侧阴影
• 右侧固定列在未滚动到最右时显示左侧阴影

横向滚动

表格支持横向滚动，当列宽度总和超过容器宽度时自动启用：

columns: [
  {
    label: '列1',
    prop: 'col1',
    width: '200px'  // 固定宽度
  },
  {
    label: '列2',
    prop: 'col2',
    width: '30%'  // 百分比宽度，会自动转换为px
  },
  {
    label: '列3',
    prop: 'col3',
    width: '1fr'  // 自适应宽度
  }
]

宽度说明：

• 支持 px、rpx、% 等单位
• 百分比宽度会根据容器实际宽度自动转换为 px
• 未设置宽度时默认使用 1fr 自适应

微信小程序插槽注册

在微信小程序中使用自定义插槽时，需要在组件中提前注册插槽：

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name',
          width: '30%',
          fixed: 'left',
          headerStyle:{
            backgroundColor: '#f0f0f0',
            color: '#333',
            fontWeight: 'bold',
          },
        },
        {
          label: '自定义',
          prop: 'custom',
          slot: 'customSlot',  // 使用注册的插槽
          width: '70%'
        }
      ],
      tableData: [
        { name: '张三', custom: 'custom data' },
        { name: '李四', custom: 'another data' }
      ]
    }
  }
}
</script>

## 高级用法

### 单元格合并

```javascript
tableData: [
  {
    name: '张三',
    info: {
      value: '合并单元格',
      rowspan: 2,  // 跨2行
      colspan: 1,  // 跨1列
      cellStyle:{
        backgroundColor: '#f0f0f0',
        color: '#333',
        fontWeight: 'bold',
      }
    }
  },
  {
    name: '李四',
    info: {
      display: false  // 被合并的单元格设为不显示
    }
  }
]

自定义样式

tableData: [
  {
    name: {
      value: '重要数据',
      cellStyle:{
        backgroundColor: '#f0f0f0',
        color: '#333',
        fontWeight: 'bold',
      }
    }
  }
]

API

Props

Events

Columns配置

单元格数据配置

注意：以下带删除线的配置项已废弃，请使用 cellStyle 对象来设置单元格样式。

兼容性处理

组件内部会自动检测Vue版本并进行相应的兼容性处理：

• 生命周期钩子: 同时支持Vue2的destroyed和Vue3的unmounted
• 事件声明: Vue3环境下自动添加emits声明
• 响应式数据: 兼容两个版本的响应式系统

注意事项

1. 在uni-app项目中使用时，确保已正确配置easycom
2. 插槽语法：
   • 请使用 <template #name="props"> 语法
   • 自定义插槽的作用域数据在两个版本中保持一致
3. 微信小程序特殊要求：
   • 使用自定义插槽时，必须在组件中提前注册
   • 不支持动态插槽，所有插槽都需要在sl-table页面中静态注册
4. 样式使用scss编写，确保项目支持scss编译
5. 组件会自动检测Vue版本并适配相应的插槽渲染方式

更新日志

v1.4

• ✅ 动态合并单元格：支持横向动态合并单元格

v1.3.3

• ✅ empty插槽：支持空数据插槽配置
• ✅ 更新columns表头样式配置项和tableData单元格样式配置项

v1.3.1

• ✅ 多级表头：支持到三级表头

v1.3.0

• ✅ 新增横向滚动支持：表格支持横向滚动，自动处理宽度计算
• ✅ 新增固定列功能：支持左侧和右侧固定列
• ✅ 固定列阴影效果：滚动时固定列显示阴影提示
• ✅ 百分比宽度优化：百分比宽度自动转换为px，确保精确显示
• ✅ 性能优化：优化追加数据时的渲染性能，使用样式缓存机制
• ✅ 加载更多优化：加载更多提示固定在可视区域，不随横向滚动

v1.2.2

• ✅ 表格体验优化：固定高度场景下表头不参与滚动
• ✅ 功能升级：新增上拉加载能力（需手动引入uni-load-more）

v1.2.0

• ✅ 新增微信小程序适配支持
• ✅ 优化插槽注册机制
• ✅ 完善小程序平台兼容性

v1.1.0

• ✅ 新增Vue2/Vue3兼容性支持
• ✅ 优化生命周期钩子处理
• ✅ 改进事件系统兼容性

v1.0.0

• ✅ 基础表格功能
• ✅ 表头合并支持
• ✅ 单元格合并支持
• ✅ 自定义插槽支持