自定义合并单元格和多级表头，支持多个自定义slot插槽，表头支持配置宽度百分比，支持vue3

原创于 2025-12-07 20:50:44 发布 · 564 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #ui #css

更新记录

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

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

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

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

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

修复bug

平台兼容性

uni-app

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	-	-	-	-	-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

sl-table

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

特性

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

兼容性

Vue版本	支持状态	说明
Vue 2.6+	✅ 完全支持	使用Options API
Vue 3.0+	✅ 完全支持	使用Options API，兼容Composition API

平台	支持状态	说明
H5	✅ 完全支持	所有功能正常
微信小程序	✅ 完全支持	插槽需要提前注册
App	✅ 完全支持	所有功能正常

安装

# 将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

参数	说明	类型	默认值
columns	表头配置	Array	[]
tableData	表格数据	Array	[]
enableLoadMore	是否开启上拉加载	Boolean	false
useDynamicMergeCellsCol	是否使用动态横向合并单元格	Boolean	false

Events

事件名	说明	回调参数
cell-click	单元格点击事件	{ rowIndex, colIndex, value, cell }
load-more	上拉加载事件	{pageNum,done}

Columns配置

参数	说明	类型	默认值
label	表头显示文本	String	-
prop	对应数据字段	String	-
width	列宽度（支持px、rpx、%、1fr）	String	'1fr'
fixed	固定列（'left' 或 'right'）	String	-
slot	自定义插槽名	String	-
children	子列配置	Array	-
headerStyle	表头样式	Object	{}

单元格数据配置

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

参数	说明	类型	默认值
value	显示值	Any	-
rowspan	行合并数	Number	1
colspan	列合并数	Number	1
display	是否显示	Boolean	true
backgroundColor	背景色	String	'#fff'
textColor	文字颜色	String	'#1A1A1A'
bold	是否加粗	Boolean	false
cellStyle	单元格样式	Object	{}