更新记录

1.0.0.2（2026-01-07） 下载此版本

master

1.0.0.1（2026-01-07） 下载此版本

master

1.0.0（2026-01-07） 下载此版本

master

查看更多

平台兼容性

uni-app(4.13)

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

其他

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

安装

在市场导入xf-sheetuni_modules版本的即可，无需import

组件关联说明

代码演示

基本用法

  • 使用组件代码如下：
<template>
    <view class="xf-col">
        <view style="padding: 20px;">
            <text>表格1 - 列边框样式，左右固定列（序号+操作），地址列支持多行显示和提示</text>
            <view style="width: 100%;height: 250px;">
                <xf-sheet :columns="column1" :data="data1" borderType="bd-col" @landScape="landScape">
                    <template v-slot:cell="obj">
                        <view class="xf-row">
                            <text style="color: red;"
                                @click="rowHandleClick(obj.index,obj.item,'edit')">编辑</text>
                            <text style="color: #0062FF; margin: 0 10px;"
                                @click="rowHandleClick(obj.index,obj.item,'add')">添加</text>
                            <text style="color: var(--xf-warn-3);"
                                @click="rowHandleClick(obj.index,obj.item,'del')">删除</text>
                        </view>
                    </template>
                </xf-sheet>
            </view>
        </view>

        <view style="padding: 20px;">
            <text>表格2 - 全边框样式，右侧固定列（操作），性别列支持提示</text>
            <view style="width: 100%; height: 300px;">
                <xf-sheet :columns="column2" :data="data1" borderType="bd-all" @landScape="landScape">
                    <template v-slot:cell="obj">
                        <view class="xf-row xf-flex-space-between">
                            <text style="color: red;"
                                @click="rowHandleClick(obj.index,obj.item,'edit')">编辑</text>
                            <text style="color: #0062FF; margin: 0 10px;"
                                @click="rowHandleClick(obj.index,obj.item,'add')">添加</text>
                            <text style="color: var(--xf-warn-3);"
                                @click="rowHandleClick(obj.index,obj.item,'del')">删除</text>
                        </view>
                    </template>
                </xf-sheet>
            </view>
        </view>

        <view style="padding: 20px;">
            <text>表格3 - 行边框样式，无固定列，简洁布局</text>
            <view style="width: 100%; height: 250px;">
                <xf-sheet :columns="column3" :data="data2" borderType="bd-row" @landScape="landScape">
                    <template v-slot:cell="obj">
                        <view class="xf-row xf-flex-space-between">
                            <text style="color: red;"
                                @click="rowHandleClick(obj.index,obj.item,'edit')">编辑</text>
                            <text style="color: #0062FF; margin: 0 10px;"
                                @click="rowHandleClick(obj.index,obj.item,'add')">添加</text>
                            <text style="color: var(--xf-warn-3);"
                                @click="rowHandleClick(obj.index,obj.item,'del')">删除</text>
                        </view>
                    </template>
                </xf-sheet>
            </view>
        </view>

        <view style="padding: 20px;">
            <text>表格4 - 无边框样式，无固定列，极简风格</text>
            <view style="width: 100%; height: 250px;">
                <xf-sheet :columns="column3" :data="data2" borderType="none" @landScape="landScape">
                    <template v-slot:cell="obj">
                        <view class="xf-row xf-flex-space-between">
                            <text style="color: red;"
                                @click="rowHandleClick(obj.index,obj.item,'edit')">编辑</text>
                            <text style="color: #0062FF; margin: 0 10px;"
                                @click="rowHandleClick(obj.index,obj.item,'add')">添加</text>
                            <text style="color: var(--xf-warn-3);"
                                @click="rowHandleClick(obj.index,obj.item,'del')">删除</text>
                        </view>
                    </template>
                </xf-sheet>
            </view>
        </view>
    </view>

</template>

模拟数据

<script lang="ts" setup>
    import { showToast } from '../../../uni_modules/xf-ts/common'
    import { SheetData } from '../../../uni_modules/xf-ts/type/type-common'

    const rowHandleClick = (index, item, status) => {
        showToast(`第${index + 1}组${status}`)
    }

    const landScape = (e) => {
        // #ifdef APP || MP-WEIXIN
        uni.navigateTo({
            url: '/package_xf/pages/help/landscape?data=' + JSON.stringify(e),
            success: (res) => {
                res.eventChannel.emit('acceptDataFromOpenerPage', e)
            }
        })
        // #endif
    }

    const column1 : Array<SheetData> = [
        { key: 'index', position: 'sticky-left', label: '序号', width: 60, textAlign: 'center' },
        { key: 'name', label: '姓名', width: 100 },
        { key: 'age', label: '年纪', width: 80 },
        { key: 'sex', label: '性别', width: 80 },
        { key: 'address', label: '地址', width: 150, textLines:2, tooltip: true },
        { key: 'date', label: '日期', width: 120 },
        { key: 'province', label: '省份', width: 80 },
        { key: 'city', label: '城市', width: 100 },
        { key: 'zip', label: '邮编', width: 100 },
        { key: 'slot', position: 'sticky-right', label: '操作', width: 140, textAlign: 'center' },
    ]

    const column2 : Array<SheetData> = [
        { key: 'index', label: '序号', width: 60, textAlign: 'center' },
        { key: 'name', label: '姓名2', width: 100 },
        { key: 'age', label: '年纪', width: 80 },
        { key: 'sex', label: '性别', width: 80},
        { key: 'address', label: '地址', width: 150 },
        { key: 'date', label: '日期', width: 120 },
        { key: 'province', label: '省份', width: 80 },
        { key: 'city', label: '城市', width: 100 },
        { key: 'zip', label: '邮编', width: 100 },
        { key: 'slot', position: 'sticky-right', label: '操作', width: 140, textAlign: 'center' },
    ]

    const data1 = [
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            sex: '0',
            price: 0,
            id: "2",
            age: 12,
            city: '普陀区',
            img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
            address: '上海市1上海市1',
            zip: 200333
        },

    ]

    const column3 : Array<SheetData> = [
        { key: 'name', label: '姓名', width: 100 },
        { key: 'age', label: '年纪', width: 80 },
        { key: 'sex', label: '性别', width: 80 },
        { key: 'address', label: '地址', width: 150 },
        { key: 'date', label: '日期', width: 120 },
        { key: 'province', label: '省份', width: 80 },
        { key: 'slot', label: '操作', width: 140, textAlign: 'center' },
    ]

    const data2 = [
        {
            name: '王小虎1',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },
        {
            name: '王小虎2',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },
        {
            name: '王小虎3',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },
        {
            name: '王小虎4',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },
        {
            name: '王小虎5',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },
        {
            name: '王小虎6',
            age: 12,
            sex: '0',
            address: '上海市普',
            date: '2016-05-01',
            province: '上海',
        },

    ]
</script>

API

Props

属性名 说明 类型 默认值
columns 表格标题及数据的设置设置 array<XFFileModel> -
data 表格数据 string 标题
borderType 表格样式 none，bd-row，bd-col，bd-all string none
cellItemHeight 表格每个item高 number 44
pdlr 表格中文字左右padding number 8
fontSize 字体大小 number 14
canLandScape 是否可以横屏 boolean false

columns 解析

    const columns : Array<SheetData> = [
        { key: 'index', position: 'sticky-left', label: '序号', width: 60, textAlign: 'center' },
        { key: 'name', label: '姓名', width: 100 },
        { key: 'age', label: '年纪', width: 80 },
        { key: 'sex', label: '性别', width: 80 },
        { key: 'address', label: '地址', width: 150, textLines:2, tooltip: true },
        { key: 'date', label: '日期', width: 120 },
        { key: 'province', label: '省份', width: 80 },
        { key: 'city', label: '城市', width: 100 },
        { key: 'zip', label: '邮编', width: 100 },
        { key: 'slot', position: 'sticky-right', label: '操作', width: 140, textAlign: 'center' },
    ]

key：表示展示列表对象字段名； position：是否浮动，一般用于第一个或最后一个； label：表格每一列的标题； width：表格每一列对应的宽度； tooltip：文字多时是否需要展示内容；

事件 Emits

事件名 说明 返回值
landScape 点击横屏，组件小程序页面不支持横屏，通过传递事件，开发者自己写一个横屏页面跳转

横屏页面大致代码展示

pages.json 注册页面


{
    "path": "pages/help/landscape",
    "style": {
        "navigationBarTitleText": "表格横屏",
        "pageOrientation": "landscape" //横屏展示
    }
},
<script setup lang="ts">
    import { getCurrentInstance, onMounted, ref } from 'vue';
    import { onUnload } from '@dcloudio/uni-app'

    //页面数据传递
    const columns = ref([])
    const data = ref([])
    const borderType = ref('')
    const cellItemHeight = ref<number>(0)
    const pdlr = ref<number>()
    const handleFixed = ref<boolean>()
    const fontSize = ref<number>()

    const reload = ref(false)

    onMounted(() => {

        // #ifdef APP
        plus.screen.lockOrientation('landscape-primary')
        plus.navigator.setFullscreen(true)
        // #endif

        const instance = getCurrentInstance().proxy
        // @ts-ignore
        const eventChannel = instance.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {
            data: 'data from test page'
        });

        eventChannel.emit('someEvent', {
            data: 'data from test page for someEvent'
        });
        eventChannel.on('acceptDataFromOpenerPage', function (res) {
            columns.value = res.columns
            data.value = res.data
            borderType.value = res.borderType
            cellItemHeight.value = res.cellItemHeight
            pdlr.value = res.pdlr
            handleFixed.value = res.handleFixed
            fontSize.value = res.fontSize
            reload.value = true
        })
    })

    onUnload(() => {
        plus.screen.lockOrientation('portrait-primary')
        plus.navigator.setFullscreen(false)
    })

    const goBack = () => {
        uni.navigateBack()
    }
</script>

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。