微信小程序 表格组件封装

背景

公司要将一部分的功能转移到微信小程序上去做，其中有一个页面有表格，可是我搜了一下官方并没有表格组件，于是我便自己封装了一个（有参考别人的文章，出处忘记了）

最终效果

代码位置

组件代码

index.wxml

<view class="table-box">
    <view class="table">
        <view class="tr">
            <view class="th" wx:for="{{thead}}" wx:key="index">{{item.name}}</view>
        </view>
        <view class="tr" wx:for="{{data}}" wx:for-item="row" wx:key="index">
            <view class="td" wx:for="{{thead}}" bindtap="onclick" data-row="{{row}}" wx:key="index">{{row[item.key]}}</view>
        </view>
    </view>
</view>

ps:这里我其实想把点击事件写到行上的，但是不知道到为什么传输的数据获取不到（微信小程序我是个小白，有大佬知道的话还请指导一下 ο(=•ω＜=)ρ⌒☆）

index.js

Component({
    properties: {
        thead: {
            type: Array
        },
        data: {
            type: Array
        },
        onclick: {
            type: String
        }
    },
    methods: {
        onclick(e) {
        	//点击事件，将所点击那一行的数据传输到父组件
            this.triggerEvent('getRowData', e.target.dataset.row)
        },
    }
})

index.wxss

.table-box{
    height: 100%;
    overflow-x: auto;
    padding-bottom: 40rpx;
}

.table {
    margin: 0 auto;
    display: table;
    border-collapse: collapse;
    overflow-x: auto;
    word-break: keep-all;
    white-space: nowrap;
    background-color: #FFFFFF;
    width: 90%;
    border-radius: 20rpx;
}

.tr {
    display: table-row;
}

.th {
    display: table-cell;
    padding: 0 10rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #DDDDDD;
    border-right: none;
    border-bottom: none;
    background-color: #10c52e;
    color: #FFFFFF;
}

.td {
    padding: 0rpx 30rpx;
    display: table-cell;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #DDDDDD;
    border-right: none;
}

index.json

{
    "component": true
}

使用

    <table thead="{{thead}}" data="{{data}}" bind:getRowData="getRowData">
    </table>

Page({
    data: {
        thead: [
            { key: 'orderNum', name: '订单编号' },
            { key: 'machNum', name: '机器编号' },
            { key: 'planeNum', name: '计划生产数量' },
            { key: 'planeEndTime', name: '计划结束时间' },
            { key: 'productName', name: '产品名称' }
        ],
        data: [
            { orderNum: '01234', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '31234', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '13455', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '47867', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '34565', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '76809', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' },
            { orderNum: '01034', machNum: '23', planeNum: '20', planeEndTime: '2022-08-08', productName: '8W0 864 733-B9_PA' }
        ],
    },
    getRowData(e) {
        this.showActionSheet(e.detail)
    },
    //这里需要对选择数据做多种处理，所以我用了 wx.showActionSheet 来做弹出菜单
    showActionSheet(row) {
        let title = `订单编号：${row.orderNum}`
        wx.showActionSheet({
            itemList: [title, "派单", "完工"],
            success(e) {
                if (!e.camcle) {
                    if (e.tapIndex == 0) {
                        return
                    } else if (e.tapIndex == 1) {
                        //点击选项（派单）后的处理
                    }
                } else {
                    console.log("cancle")
                }
            },
            fail(e) {
                console.log("fail")
                console.log(e)
            },
            complete(e) {
                // console.log("complete")
                // console.log(e)
            }
        })
    }
})

本人小白，写的不好大佬勿喷，请多指教 o(￣▽￣)ブ