更新记录

0.04（2022-07-13）

文字超出隐藏

0.03（2022-05-17）

新增点击事件

点击自定义跳转路由

新增input设置事件

0.02（2022-04-12）

新增可编辑项

平台兼容性

表格

表格组件

注意事项

组件需要依赖 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]}} ></view>
            </picker>
        </view>
        <wyh-table :items="list" :thList="thList" :select="select" :rightBorder="rightBorder"></wyh-table>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                rightBorder: false,
                select: '',     //空  不可选    radio   单选   multiple   多选
                selects: ['不可选','单选', '多选'],
                index: 0,
                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,        
                    sortKey: 'count',    
                    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',   
                }],
                list: [{
                    name: '吴佳烨1',
                    phone: '13569869863',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转'
                },{
                    name: '吴佳烨2',
                    phone: '13569869863',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转'
                },{
                    name: '吴佳烨3',
                    phone: '13569869863',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-'
                },{
                    name: '吴佳烨4',
                    phone: '13569869863',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '转'
                },{
                    name: '吴佳烨5',
                    phone: '13569869863',
                    count: 296.00,
                    cash: 296.00,
                    sales: 269.00,
                    order: 296.00,
                    share: 296.00,
                    mark: '-'
                }]
            }
        },
        methods: {
            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>