更新记录

1.0.7（2026-03-27） 下载此版本

优化固定列的逻辑

1.0.6（2025-08-11） 下载此版本

新增 multiple 属性,控制是否多选,默认 true

1.0.5（2025-07-23） 下载此版本

1.修复上版本,更换逻辑导致的vue3版本无法运行的问题

查看更多

平台兼容性

uni-app(4.07)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - √ √ -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - - -

组件名: xt-table

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="content">
        <xt-table :data='list' select maxHeight='300px' @scrollBottom='scrollBottom'>
            <xt-table-item label='姓名' prop='name' width="200px"></xt-table-item>

            <xt-table-item label='年龄' prop='age' width="200px"></xt-table-item>

            <xt-table-item label='性别' prop='sex' width="200px"></xt-table-item>

            <xt-table-item label='电话' prop='phone' width="200px"></xt-table-item>

        </xt-table>

    </view>

</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        name: '张三',
                        age: 18,
                        sex: '男',
                    },
                    {
                        name: '李四',
                        age: 20,
                        sex: '男',
                    },

                    {
                        name: '赵六',
                        age: 21,
                        sex: '男',
                    }
                ],
            }
        },
        onLoad() {
            setTimeout(() => {
                this.list.push({
                    name: '王五',
                    age: 22,
                    sex: '男',
                })
            }, 5000)
        },
        methods: {
            scrollBottom() {
                console.log('触底了');
            },
            selectChange(e) {
                console.log(e);
            }
        }
    }
</script>

<style>
    .content {
        padding: 20px;
    }
</style>

插槽用法(微信小程序不支持,微信请看下面写法)

插槽名称就是对应字段名

<xt-table :data='list' select maxHeight='300px' @scrollBottom='scrollBottom'>
            <xt-table-item label='姓名' prop='name' width="200px"></xt-table-item>

            <template #name='{item}'>
                <button>{{item.name}}</button>

            </template>

            <xt-table-item label='年龄' prop='age' width="200px"></xt-table-item>

            <template #age='{item}'>
                {{item.age<18?'未成年':'成年'}}
            </template>

            <xt-table-item label='性别' prop='sex' width="200px"></xt-table-item>

            <xt-table-item label='电话' prop='phone' width="200px">
            </xt-table-item>

</xt-table>

微信小程序用法

<template>
    <view class="content">
        <xt-table :data='list' select maxHeight='300px' @selectChange="selectChange">
            <xt-table-item label='姓名' prop='name' width="200px" align="center"></xt-table-item>
            <xt-table-item label='年龄' prop='age' width="200px" align="center" :tableEvent='handleAge'></xt-table-item>
            <xt-table-item label='性别' prop='sex' width="200px" align="right"></xt-table-item>
            <xt-table-item label='图片' prop='img' width="200px" type="image" :renders="imgList"></xt-table-item>
            <xt-table-item label='操作' width="200px" type="button" align="center" :renders="btnList" cellClass="test"
                :tableEvent="handleSex"></xt-table-item>
        </xt-table>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        name: '张三',
                        age: 16,
                        sex: '男',
                        img: [
                            'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                            'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc'
                        ]
                    },
                    {
                        name: '李四',
                        age: 17,
                        sex: '男',
                        img: [
                            'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc'
                        ]
                    },

                    {
                        name: '赵六',
                        age: 21,
                        sex: '男',
                        img: [
                            'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc'
                        ]
                    }
                ],
                btnList: [{
                        name: '编辑',
                        size: 'mini',
                        type: 'warn',
                        plain: 'true',
                    },
                    {
                        name: '删除',
                        size: 'mini',
                        disabled: true,
                    },
                ],
                imgList: {
                    'showMenuByLongpress': true
                }
            }
        },
        onLoad() {
            setTimeout(() => {
                this.list.push({
                    name: '王五',
                    age: 22,
                    sex: '男',
                })
            }, 5000)
        },
        methods: {
            handleSex(e, index) {
                console.log(e, index);
            },
            handleAge(e) {
                return e + '岁'
            },
            scrollBottom() {
                console.log('触底了');
            },
            selectChange(e) {
                console.log(e);
            },
        }
    }
</script>

<style lang="scss">
    .content {
        padding: 20px;
    }

    .test {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20rpx;
    }
</style>

xt-table 属性和方法

属性名 类型 默认值 是否必填 描述
data Array [] 是 数据源
border Boolean true 否 是否显示边框
fit Boolean true 否 是否自适应宽度
maxHeight String '' 否 最大高度
select Boolean false 否 是否显示选择框
multiple Boolean true 否 是否多选
bottomGap Number 100 否 触底距离
selectFixed Boolean true 否 选择框是否固定
headFixed Boolean true 否 表头是否固定
tfoot Boolean false 否 是否显示表尾
tfootFixed Boolean true 否 表尾是否固定
事件名 描述 返回值
scrollBottom 触底事件 无
selectChange 选择事件 选中的数据

xt-table-item 属性

属性名称 类型 默认值 是否必填 说明
show Boolean true 否 是否展示该列
align String left 否 对齐方式，支持 'left', 'center', 'right'
label String - 是 表头名称
prop String - 是 字段名
fixed String "" 否 是否固定，支持 'left', 'right'
width String - 否 单元格宽度
tableEvent (仅微信小程序支持) Function 否 单元格事件
type (仅微信小程序支持) String text 否 单元格类型，支持 'text', 'image', 'button'
renders (仅微信小程序支持) Array,Object 无 否 单元格配置数据
cellClass (仅微信小程序支持) String "" 否 单元格样式

type 为 button 时, renders 格式以及字段

[
  {
    name: '编辑',
    size: 'mini',
    type: 'warn',
    plain: true,
  },
  {
    name: '删除',
    size: 'mini',
    disabled: true,
  }
]
按钮事件
handleSex(e, index) {
        console.log(e, index);
}

其中 e 为单元格数据, index 为点击的第几个按钮

属性名称 类型 是否必填 说明
name String 是 按钮名称
size String 否 按钮大小(同 uniapp 官网)
type String 否 按钮类型 (同 uniapp 官网)
plain Strin 否 按钮是否镂空 (同 uniapp 官网)
disabled Boolean 否 按钮是否禁用 (同 uniapp 官网)
class String 否 按钮类名 (不能写在含有 scoped 标签中)

type 为 image 时, renders 格式以及字段

{
   'showMenuByLongpress': true
}
属性名称 类型 是否必填 说明
class String 否 图片类名 (不能写在含有 scoped 标签中)
mode String 否 裁剪模式 (同 uniapp 官网)
lazyLoad Boolean 否 图片懒加载 (同 uniapp 官网)
fadeShow Boolean 否 动画效果 (同 uniapp 官网)
webp Boolean 否 开启webp (同 uniapp 官网)
showMenuByLongpress Boolean 否 长按识别图片 (同 uniapp 官网)

type 为 text 时, tableEvent事件写法

handleAge(e) {
  return e + '岁'
}

其中 e 为当前单元格数据,必须要写 return 才能有渲染

说明

  1. 兼容性需要自行尝试,已知 APP、H5、微信小程序
  2. 需要其他兼容可以自行下载看是否可以,不可以的话留言,我试着改
  3. 有问题或想法请留言,看到就提上日程

隐私、权限声明

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

无

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

无

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

无

许可协议

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