更新记录

1.0.1（2025-03-03） 下载此版本

修改组件结构

1.0.0（2025-02-28） 下载此版本

初版

平台兼容性

uni-app

其他

使用说明

grid表格可自定义竖向合并单元格和多级表头，暂不支持横向，支持多个自定义slot插槽，表头支持配置宽度百分比

使用方式

    安装后可直接使用，插件符合uni_modules规则

在页面中使用组件

    <sl-table :columns="columns" :tableData="tableData"></sl-table>

在页面中使用自定义插槽

    <sl-table :columns="columns" :tableData="tableData">
        <template #你的自定义插槽名="{ row }">{{row.total}}</template>
    </sl-table>

参数说明

Props

示例

<template>
    <view class="content">
    <sl-table :columns="columns" :tableData="tableData">
            <template #customSlot="{ row }">{{row.total}}</template>
    </sl-table>
    </view>
</template>

<script>
    export default {
    data() {
            return {
        title: 'Hello',
        columns: [{
                label: '菜品类别',
        children: [],
        prop: 'type',
        width: '40%',
        },
                {
                    label: '成本',
                    width: '30%',
                    children: [{
                        label: '数值（占比）',
                        prop: 'totalPercent',
                        slot: 'customSlot', //自定义slot
                        width: '100%',
                    }, ]
        },
        {
                    label: '菜品名称',
                    width: '30%',
                    children: [{
                        label: '数值（占比）',
                        prop: 'name',
                        width: '100%'
                    }, ]
        }],
        tableData: [{
                    name: '超级无敌红烧肉 30%',
                    type: {
                            value: '川菜',
                            rowspan: 3
                           },
                    total:'100%',
                    totalPercent: {
                            rowspan: 3 // 向下合并3行
                           }
            },
                    {
            name: '超级无敌五花肉 50%',
            type: {
                display: false
                              },
            totalPercent: {
                display: false
                }
                    },
                    {
            name: '超级无敌东坡肉 20%',
            type: {
                display: false
                                },
            totalPercent: {
                display: false
                }
                    }]
                }
            },
            onLoad() {

            },
            methods: {

            }
    }
</script>

<style>

</style>