更新记录

0.07(2024-06-19) 下载此版本

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

0.06(2024-06-19) 下载此版本

新增图片、图片预览

0.05(2024-06-19) 下载此版本

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

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.22 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

表格

表格组件

注意事项

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

属性 Props

属性名 类型 默认值 说明
thList Array [] 表头数据
items Array [ ] 表格显示所需的数据,数据格式见下方示例
activeIds Array [ ] 默认选中项id
select String '' 是否可选,空值:不可选 radio:单选 multiple:多选
selectMax Number 0 最大可选数量, 0:不限
selectAll Boolean 0 是否支持全选,select 为 multiple, 并且 selectMax 有效
sort String 'desc' 排序, desc: 降序 acs: 升序
sortKey String '' 排序关键词
rightBorder Boolean false 是否显示固定区与滚动区的分隔线
selectStr String '选择' 选择列的表头文本
stripe Boolean false 是否展示斑马纹

表头thList item项

属性名 类型 默认值 说明
text Boolean false 名称
fixed Boolean false 固定在前的列, 一般设置1-2项
sortKey String '' 排序关键词,有值就可排序
dataKey String 'index' 该列渲染的数据字段, 必填项
dataType String '' 该列渲染的数据类型,支持:image:图片
markKey String '' 该列渲染标记字段
width String '200rpx' 该列渲染的宽度
isInput Boolean false 该列是否可编辑
inputType String 'text' input 类型
inputPlaceholder String '' input placeholder属性值
inputWidth String '80rpx' input 宽度
inputHeight String '44rpx' input 高度
inputSize String '26rpx' input 字体大小
unit String '' 该列的单位值,如%,只,份, 元.....

表格items item项

属性名 类型 默认值 说明
disabled Boolean false 是否禁止选择

方法 Events

属性名 返回值 说明
onSelect Array 返回ids
onSort Object 返回排序数据 {sort: 'desc/asc', sortKey: ''}
onSetting Object 表头 isInput 为true 时有效,返回{key: '', value: '', data: {}}, key:修改字段,vaule:修改值, data:修改后的数据
onClick Object 返回点击项item数据

代码示例

<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>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问