更新记录

1.1.2（2025-08-08） 下载此版本

更新readme.md文件

1.1.1（2025-08-08） 下载此版本

修复bug

1.1.0（2025-08-08） 下载此版本

适配vue3

平台兼容性

uni-app

其他

sl-table

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

特性

• ✅ Vue2/Vue3兼容: 同时支持Vue2和Vue3环境
• ✅ 表头合并: 支持多级表头和单元格合并
• ✅ 单元格合并: 支持行合并和列合并
• ✅ 自定义插槽: 支持单元格自定义内容
• ✅ 响应式: 自适应不同屏幕尺寸
• ✅ 虚拟滚动: 支持大量数据的分页加载
• ✅ 样式自定义: 支持自定义单元格样式

兼容性

安装

# 将sl-table文件夹复制到项目的uni_modules目录下

基础用法

Vue3风格（推荐）

<template>
  <sl-table 
    :columns="columns" 
    :tableData="tableData"
    @cell-click="handleCellClick"
  >
    <!-- Vue3自定义插槽 -->
    <template #customSlot="{ row, cell }">
      <view class="custom-content">
        {{ row.customField }}
      </view>
    </template>
  </sl-table>
</template>

Vue2风格

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

## 高级用法

### 单元格合并

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

自定义样式

tableData: [
  {
    name: {
      value: '重要数据',
      backgroundColor: '#ff6b6b',
      textColor: '#fff',
      bold: true
    }
  }
]

API

Props

Events

Columns配置

单元格数据配置

兼容性处理

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

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

注意事项

1. 在uni-app项目中使用时，确保已正确配置easycom
2. 插槽语法：
   • 请使用 <template #name="props"> 语法
   • 自定义插槽的作用域数据在两个版本中保持一致
3. 样式使用scss编写，确保项目支持scss编译
4. 组件会自动检测Vue版本并适配相应的插槽渲染方式

更新日志

v1.1.0

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

v1.0.0

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