更新记录

1.0.1（2026-01-15）

新增功能

• 无

问题修复

• 修复Vue2调用插槽时的渲染问题
• 修复Vue3中事件抛出的问题

功能优化

• 无

1.0.0（2026-01-15）

新增功能

• 初始化表格

问题修复 无

功能优化 无

平台兼容性

uni-app(4.81)

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

• ima-table支持自定义渲染、自定义按钮插槽、排序、固定多列、多选、单选...
• ima-table支持列的排序事件、某行点击事件、单元格点击事件、复选框事件、单选框事件...
• ima-table支持重新加载数据方法、获取当前已选中的行数据、指定行为选中状态、指定行为高亮状态...

示例地址

• ima-table 表格地址

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

自定义数据渲染

• 年龄这一列通过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>

表格 Props 参数

columns 表头配置

表格 事件

表格 方法