更新记录

1.0.5（2026-02-09） 下载此版本

新增功能

  • 回馈社区，免费使用

问题修复

  • 无

功能优化

  • 无

1.0.4（2026-01-27） 下载此版本

新增功能

  • 无

问题修复

  • 1、修复表格样式在app和h5端差异的问题
  • 2、修复在VUE2+APP环境时无法使用Render函数渲染的问题

功能优化

  • 无

1.0.3（2026-01-21） 下载此版本

新增功能

  • 1、新增不固定表头
  • 2、新增自动求和
  • 3、新增自定义求和
  • 4、新增固定合计到第一行的方法

问题修复

  • 无

功能优化

  • 1、优化不设置高度，表格高度根据父级的高度来
查看更多

平台兼容性

uni-app(4.81)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android Android插件版本 iOS iOS插件版本 鸿蒙 鸿蒙插件版本
- - - - - × 5.0 1.0.4 12 1.0.4 5.0以下（不包括5.0） 1.0.4
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

一款可自定义渲染、自定义按钮插槽、排序、固定多列、多选、单选...的多功能表格（Table）组件 (ima-table)

  • ima-table 是一款专为 Uni-app 开发的高性能表格组件。
  • 支持 表头合并（列组）、插槽式/配置式定义列、固定多列（支持左右冻结）。
  • 具备完整的交互功能：排序、多选、单选、行/单元格点击事件。
  • 灵活的渲染方式：支持 formatter 函数处理或 slot 自定义模板。

核心特性

  • 🚀 灵活定义：支持通过 columns 属性配置，或在模板中使用 ima-column/ima-colgroup 插槽定义。
  • 🔗 表头合并：通过 ima-colgroup 轻松实现多级表头。
  • 📌 冻结定位：支持 fixed="left" 或 fixed="right"，列组固定时子列自动继承。
  • 🎨 高度自定义：单元格内容支持完全自定义插槽渲染。

示例地址

使用示例【此示例的代码只实现了自定义数据渲染、自定义插槽、表头合并的逻辑，更多示例请导入项目】

自定义数据渲染

  • 年龄这一列通过formatter自定义渲染内容
<template>
    <view class="content">
        <ima-table
            :height="280"
            :columns="columns"
            :data="datas"
            :stripe="true"
            @sortChange="sortChange"
            @rowClick="rowClick"
            @cellClick="cellClick"
            />
    </view>
</template>

<script>
export default {
    data() {
        // 列数据
        columns: [
            { title: '序号', type: 'seq', width: '50px', align: 'center' },
            { title: '姓名', field: 'name', sort: true, width: '120px' },
            { title: '性别', field: 'gender', sort: true, width: '80px' },
            {
                title: '年龄',
                field: 'age',
                sort: true,
                width: '100px',
                formatter: (row) => {
                    return row.age <= 18 ? '未成年' : row.age >= 50 ? '老年人' : '成年人'
                }
            },
            { title: '电话', field: 'phone', align: 'center', width: '150px' },
            { title: '邮箱', field: 'email', width: '220px' },
            { title: '地址', field: 'address', width: '240px' }
        ],
        // 表格数据
        datas: [
            {
                name: '萧丽帅',
                email: 'U1dXTJH3CTy@hotmail.com',
                phone: '157****7658',
                gender: '女',
                age: 55,
                address: '重庆市********************街道334号'
            },
            {
                name: '赵杰',
                email: 'XyoYtaA0SRL@vip.sina.com',
                phone: '158****3361',
                gender: '男',
                age: 17,
                address: '黑龙江省****************街道507号'
            },
            {
                name: '董明桂英',
                email: '590oDQjkr@qq.com',
                phone: '138****3077',
                gender: '女',
                age: 50,
                address: '天津市合肥****************街道487号'
            }
        ]
    },
    methods: {
        // 列的排序事件
        sortChange(data) {
            console.log('列的排序事件', data)
        },
        // 单击某行
        rowClick(data) {
            console.log('单击某行', data)
        },
        // 单击单元格
        cellClick(data) {
            console.log('单击单元格', data)
        },
    }
}
</script>

自定义插槽

  • 使用插槽，使用内部组件ima-column自定义渲染
<template>
    <view class="content">
        <ima-table
            :height="280"
            :columns="columns"
            :data="datas"
            :typeConfig="typeConfig"
            :stripe="true"
            @sortChange="sortChange"
            @rowClick="rowClick"
            @cellClick="cellClick"
            @radioChange="radioChange"
            @checkboxAll="checkboxAll"
            @checkboxChange="checkboxChange">
            <ima-column
                v-for="(col, index) in columns"
                v-bind="col"
                :key="index"
                :width="col.width || '120px'"
            >
                <template #default="{ row }">
                    {{ row[col.field] }}
                </template>
            </ima-column>
            <ima-column title="操作" width="100px" align="center">
                <template #default="{ row, rowIndex }">
                    <view class="row-handle-btn">
                        <text style="color: green" @click.stop="rowHandleClick(row, rowIndex, 'edit')"
                            >编辑</text
                        >
                        <text style="color: red" @click.stop="rowHandleClick(row, rowIndex, 'del')"
                            >删除</text
                        >
                    </view>
                </template>
            </ima-column>
        </ima-table>
    </view>
</template>

<script>
export default {
    data() {
        // 禁用checkbox\radio
        typeConfig: {
            checkMethod(row) {
                return row.age > 26
            }
        },
        // 列数据
        columns: [
            { type: 'radio', width: '50px', align: 'center' },
            // { type: 'checkbox', width: '50px',  align: 'center' },
            // { title: '序号', type: 'seq', width: '50px', align: 'center' },
            { title: '姓名', field: 'name', sort: true, width: '120px' },
            { title: '性别', field: 'gender', sort: true, width: '80px' },
            { title: '年龄', field: 'age', sort: true, width: '100px' },
            { title: '电话', field: 'phone', align: 'center', width: '150px' },
            { title: '邮箱', field: 'email', width: '220px' },
            { title: '地址', field: 'address', width: '240px' }
        ],
        // 表格数据
        datas: [
            {
                name: '萧丽帅',
                email: 'U1dXTJH3CTy@hotmail.com',
                phone: '157****7658',
                gender: '女',
                age: 55,
                address: '重庆市济南东城区三一街道334号'
            },
            {
                name: '赵杰',
                email: 'XyoYtaA0SRL@vip.sina.com',
                phone: '158****3361',
                gender: '男',
                age: 17,
                address: '黑龙江省武汉海淀区八二街道507号'
            },
            {
                name: '董明桂英',
                email: '590oDQjkr@qq.com',
                phone: '138****3077',
                gender: '女',
                age: 50,
                address: '天津市合肥石景山区六一街道487号'
            }
        ]
    },
    methods: {
        // 自定义点击事件
        rowHandleClick(row, index, type) {
            console.log("自定义点击事件",row, index, type)
        },
        // 列的排序事件
        sortChange(data) {
            console.log('列的排序事件', data)
        },
        // 单击某行
        rowClick(data) {
            console.log('单击某行', data)
        },
        // 单击单元格
        cellClick(data) {
            console.log('单击单元格', data)
        },
        // 复选框变化事件
        checkboxChange(data) {
            console.log('复选框变化事件', data)
        },
        // 勾选全选时触发
        checkboxAll(data) {
            console.log('勾选全选时触发', data)
        },
        // 单选框变化事件
        radioChange(data) {
            console.log('单选框变化事件', data)
        },
    }
}
</script>

表头合并

  • 通过merge、mergeColumns实现表头合并
  • 若想用插槽方式，请参考示例代码使用ima-colgroup组件实现
<template>
    <view class="content">
        <ima-table
            :height="280"
            :columns="columns"
            :data="datas"
            :stripe="true"
            @sortChange="sortChange"
            @rowClick="rowClick"
            @cellClick="cellClick"
            />
    </view>
</template>

<script>
export default {
    data() {
        // 列数据
        columns: [
            { title: '序号', type: 'seq', width: '50px', align: 'center',fixed: 'left' },
            { title: '姓名', field: 'name', sort: true, width: '120px',fixed: 'left' },
            { 
                title: '基础信息', 
                field: 'groupInfo', 
                width: '180px', 
                merge: true , 
                mergeColumns: [
                    { title: '性别', field: 'gender', sort: true, width: '90px' },
                    { title: '年龄', field: 'age', sort: true, width: '90px' },
                ]
            },

            { title: '电话', field: 'phone', align: 'center', width: '150px' },
            { title: '邮箱', field: 'email', width: '220px' },
            { title: '地址', field: 'address', width: '240px' }
        ],
        // 表格数据
        datas: [
            {
                name: '萧丽帅',
                email: 'U1dXTJH3CTy@hotmail.com',
                phone: '157****7658',
                gender: '女',
                age: 55,
                address: '重庆市********************街道334号'
            },
            {
                name: '赵杰',
                email: 'XyoYtaA0SRL@vip.sina.com',
                phone: '158****3361',
                gender: '男',
                age: 17,
                address: '黑龙江省****************街道507号'
            },
            {
                name: '董明桂英',
                email: '590oDQjkr@qq.com',
                phone: '138****3077',
                gender: '女',
                age: 50,
                address: '天津市合肥****************街道487号'
            }
        ]
    },
    methods: {
        // 列的排序事件
        sortChange(data) {
            console.log('列的排序事件', data)
        },
        // 单击某行
        rowClick(data) {
            console.log('单击某行', data)
        },
        // 单击单元格
        cellClick(data) {
            console.log('单击单元格', data)
        },
    }
}
</script>

表格 Props 参数

参数名称 说明 类型 默认值 可选值
columns 表头配置 any[] "" -
data 表格数据 any[] "" -
height 表格的高度 number、string "auto" auto,px,rpx,%
min-height 表格最小高度 number、string "" px,rpx,%
stripe 是否带有斑马纹样式 boolean "" true,false
border 是否带有边框 string "default" default(默认),full(完整边框),outer(外边框),inner(内边框), none(无边框)
align 列对齐方式 string "default" left(左对齐),center(居中对齐),right(右对齐)
overflow 设置内容过长时显示方式 string "ellipsis" ellipsis(省略号),title(原生title),newline(换行)
fixedHeader 是否固定表头（第一行） boolean true true, false
fixedFirstRow 是否将合计行固定在第一行显示 boolean false true, false
showSummary 是否显示表尾合计行 boolean false true, false
sumText 合计行第一列文本 string "合计" -
summaryMethod 自定义合计方法 function null ({ columns, data }) => []
empty 空数据时渲染器 any "" -
loading 数据加载中 boolean "" true,false
typeConfig 配置禁用规则 any any -
sortConfig 配置排序规则 any any -
isLandScape 是否可以横屏\竖屏 boolean "" true,false

columns 表头配置

参数名称 说明 类型 默认值 可选值
title 列标题 string "" -
field 列字段名 string "" -
width 列宽度 number、string "" auto,px,rpx,%
min-width 最小列宽度 number、string "" auto,px,rpx,%
visible 默认是否显示 boolean true true,false
fixed 将列固定在左侧或者右侧 string "" left(冻结左侧),right(冻结右侧)
align 列对齐方式 string "" left(左对齐),center(居中对齐),right(右对齐)
overflow 设置内容过长时显示方式 string "" ellipsis(省略号),title(原生title),newline(换行)
sort 列的排序 boolean false true,false
resizable 列是否允许拖动列宽调整大小 boolean false true,false
type 列的类型 string "" seq(序号),checkbox(复选框),radio(单选框)

表格 事件

事件名称 说明 类型 默认值 可选值
sortChange 列的排序事件 Function - (column,model,index)=>{}
rowClick 单击某行 Function - (row ,index)=>{}
cellClick 单击单元格 Function - (row ,index,column)=>{}
checkboxChange 复选框变化事件 (只对 type=checkbox 有效) Function - (({ checkedRows, row, index }) => {}
checkboxAll 勾选全选时触发 (只对 type=checkbox 有效) Function - (({ checked, checkedRows }) => {}
radioChange 单选框变化事件 (只对 type=radio 有效) Function - ({ selectedRow, row, index }) => {}

表格 方法

方法名称 说明 类型 默认值
loadData(data) 加载数据 Function data: array
getCheckedRows 获取当前已选中的行数据 Function -
setCheckboxRow(rows, checked) 设置行为选中状态，第二个参数为选中与否 Function rows: array, checked: boolean
getRadioRecord 获取当前已选中的行数据 Function -
setRadioRow(row) 指定行为选中状态 Function row: any
setCurrentRow(row) 指定行为高亮状态 Function row: any
clearSelection 清空所有选择（复选框和单选框） Function -

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...