更新记录

0.07（2024-06-19） 下载此版本

新增全选、禁用项、斑马纹配置

0.06（2024-06-19） 下载此版本

新增图片、图片预览

0.05（2024-06-19） 下载此版本

移除isClick、links、linksKey， 新增最大可选数量，更新代码示例

平台兼容性

表格

表格组件

注意事项

组件需要依赖 scss 插件, 或自己去手动修改css样式（很简单）

属性 Props

表头thList item项

表格items item项

方法 Events

代码示例

<template>
    <view class="page">
        <view class="p">
            <view>是否显示分割线</view>
            <switch :checked="rightBorder" style="transform:scale(0.8)" @change="switchChange" />
        </view>
        <view class="p">
            <view>是否可选</view>
            <picker mode="selector" :range="selects" @change="bindPickerChange">
                <view>
                    {{selects[index]}}
                    <uni-icons type="right" color="#999"></uni-icons>
                </view>
            </picker>
        </view>
        <wyh-table :items="list" :thList="thList" :select="select" selectMax="4.5" :rightBorder="rightBorder" @onSelect="" @onSort="onSort" @onClick="onClick" @onSetting="onSetting"></wyh-table>

        <view class="p" v-if="select">
            <view>选中的数据—ID</view>
            <view>{{JSON.stringify(selectResult)}}</view>
        </view>
        <view class="p" v-if="sortResult.sortKey">
            <view>排序</view>
            <view>{{JSON.stringify(sortResult)}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                rightBorder: true,
                select: '',     //空  不可选    radio   单选   multiple   多选
                selects: ['不可选','单选', '多选'],
                index: 0,
                selectResult: [],   //选中数据
                sortResult: {},     //排序数据
                thList: [{
                    text: '排名',
                    fixed: true,        //固定在前的列   一般设置1-2项
                    sortKey: '',    //有就可以排序
                    dataKey: 'index',    //该列渲染的数据字段 
                    markKey: '',    //该列渲染的标记字段 
                    width: '80rpx'
                },{
                    text: '掌柜',
                    fixed: true,       
                    sortKey: '',    
                    dataKey: 'name', 
                    markKey: 'mark',
                    width: '180rpx'
                },{
                    text: '手机号',
                    fixed: false,        
                    sortKey: '',    
                    dataKey: 'phone',   
                },{
                    text: '奖励总额',
                    fixed: false,        
                    isInput: true,    
                    dataKey: 'count',  
                },{
                    text: '已提现奖励',
                    fixed: false,        
                    sortKey: 'cash',    
                    dataKey: 'cash',    
                },{
                    text: '售卡奖励',
                    fixed: false,        
                    sortKey: 'sales',    
                    dataKey: 'sales',   
                },{
                    text: '消费奖励',
                    fixed: false,        
                    sortKey: 'order',    
                    dataKey: 'order',   
                },{
                    text: '介绍奖励',
                    fixed: false,        
                    sortKey: 'share',    
                    dataKey: 'share',   
                },{
                    text: '图片预览',
                    dataKey: 'img',
                    dataType: 'image',
                    width: '100rpx'
                }],
                list: [{
                    id: 1,
                    name: '笑哈哈1',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转',
                    img: 'https://picsum.photos/500'
                },{
                    id: 2,
                    name: '笑哈哈2',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转',
                    img: 'https://picsum.photos/600'
                },{
                    id: 3,
                    name: '笑哈哈3',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-',
                    img: 'https://picsum.photos/500/400'
                },{
                    id: 4,
                    name: '笑哈哈4',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转',
                    img: 'https://picsum.photos/600/500'
                },{
                    id: 5,
                    name: '笑哈哈5',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-',
                    img: 'https://picsum.photos/700'
                },{
                    id: 6,
                    name: '笑哈哈6',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-',
                    img: 'https://picsum.photos/500/700'
                },{
                    id: 7,
                    name: '笑哈哈7',
                    phone: '',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-',
                    img: 'https://picsum.photos/500/650'
                }]
            }
        },
        methods: {
            // 排序
            onSort(ret) {
                this.sortResult = ret;
                // 获取排序要求 请求后台接口、更新数据
            },
            // 选中的数据
            (ret) {
                this.selectResult = ret;
            },
            // 设置
            onSetting(ret) {
                console.log('设置', ret)
            },
            //点击事件
            onClick(item) {
                console.log('点击项', item) 
            },
            switchChange(e) {
                this.rightBorder = e.detail.value;
            },
            bindPickerChange: function(e) {
                this.index = e.detail.value;
                if(this.index == 0) {
                    this.select = '';
                } else if (this.index == 1) {
                    this.select = 'radio';
                } else if (this.index == 2) {
                    this.select = 'multiple';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        padding: 40rpx 0;
    }
    .p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
    }
</style>