xt-table表格组件可固定表头选择框合计行固定行

更新记录

1.0.3（2025-01-22）下载此版本

1.优化微信小程序默认文本不显示问题 2.优化英文文本不换行问题

1.0.2（2025-01-21）下载此版本

完整兼容微信小程序

1.0.1（2025-01-21）下载此版本

更新使用文档

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

组件名: 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 属性和方法

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

事件名	描述	返回值
`scrollBottom`	触底事件	无
`selectChange`	选择事件	选中的数据

xt-table-item 属性

属性名称	类型	默认值	是否必填	说明
`tableId`	`String`	""	否	表格ID ( 值同 xt-table 一样 )
`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 才能有渲染

说明

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

xt-table表格组件可固定表头选择框合计行固定行表格 简洁 自定义插槽

更新记录

1.0.3（2025-01-22）下载此版本

1.0.2（2025-01-21）下载此版本

1.0.1（2025-01-21）下载此版本

平台兼容性

组件名: xt-table

安装方式

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

基本用法

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

插槽名称就是对应字段名

微信小程序用法

xt-table 属性和方法

xt-table-item 属性

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

按钮事件

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

type 为 text 时, tableEvent事件写法

说明

隐私、权限声明

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

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

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

许可协议

MIT协议

日历组件xt-calendar可选择年与月切换支持左右滑动加载年份月份

xt-table表格组件可固定表头选择框合计行固定行

图标组件xt-icon支持图片图标内置153个图标随便挑选

xt-image 图片组件

xt-table表格组件可固定表头选择框合计行固定行 表格 简洁 自定义插槽

更新记录

1.0.3（2025-01-22） 下载此版本

1.0.2（2025-01-21） 下载此版本

1.0.1（2025-01-21） 下载此版本

平台兼容性

组件名: xt-table

安装方式

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

基本用法

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

插槽名称就是对应字段名

微信小程序用法

xt-table 属性和方法

xt-table-item 属性

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

按钮事件

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

type 为 text 时, tableEvent事件写法

说明

隐私、权限声明

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

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

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

许可协议

MIT协议

日历组件xt-calendar可选择年与月切换支持左右滑动加载年份月份

xt-table表格组件可固定表头选择框合计行固定行

图标组件xt-icon支持图片图标内置153个图标随便挑选

xt-image 图片组件

Modal title

xt-table表格组件可固定表头选择框合计行固定行表格简洁自定义插槽

1.0.3（2025-01-22）下载此版本

1.0.2（2025-01-21）下载此版本

1.0.1（2025-01-21）下载此版本