更新记录

1.0.0(2025-01-13) 下载此版本

根据数据内容,自适应按行显示表格组件,可用于复杂表格的数据展示


平台兼容性

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

yjly-row-cell

用于复杂表格的数据展示,界面类似excel,可根据数据内容,自定义每行显示数据个数,按照栅格自适应按行显示。属性cellData,在父组件按照数组结构配置,rowDataCount,每行显示的数据个数。

示例数据:

{ "zgbm": "03502", "lxzd": "长期驻外", "orgCode_dictText": "开发", "cjgzsj": "2022-07-01", "jcbzCode": null, "dah": "241**78", "yxjts": 5, "ygzdw1": null, "ygzdw2": null, "zplj": "人员照片/03502961.jpg", "rylb1_dictText": "合同制员工", "jydw": null, "jydwbm_dictText": null, "sfzw_dictText": "是", "gwzt": "1", "id": "161556638534658", "cbdw": null, "cbdwbm_dictText": null, "jjlxr": "梁*", "bzz": null, "gszd": "1", "rylb4": null, "rylb3": null, "rylb2": "161556638534658", "zwmc": "助理师", "rylb1": "161556638534658", "gwzt_dictText": "正常在岗", "xb_dictText": "男", "mz": "汉族", "jrsj": null, "sdgw": "技术岗", "rylb4_dictText": null, "dwbh": "032021003000", "zrsj": "- -", "sysOrgCode": "A01A01", "jtzz": "山东省**", "jcdw": "开发所", "jg": "山东济宁", "nl": 28, "ldhth": "2478", "sfzhm": "370****913", "sfgs": null, "zywhgz": null, "jcxd": "综合室", "updateBy": "yan9", "orgCode": "A01A01", "jydwbm": null, "bz1": null, "rylb3_dictText": null, "zzmm": "共青团员", "czzz": null, "bz2": null, "jcxdCode": "A01A01A19A03", "jcbz": null, "jcsj": null, "dbfs": "常白班", "sfzw": "Y", "gl": 5, "rylb2_dictText": "职工", "cssj": "2000-09-28", "updateTime": "2025-01-02", "xb": "1", "sftyjr_dictText": null, "sjh": "13963705400", "sftyjr": null, "createBy": "admin", "createTime": "2001-02-23", "xm": "王", "csd": "山东", "gzdw": "开发所综合室", "cbdwbm": null, "gszd_dictText": "标准工时制", "llfs": "1**836", "zjmc": null }

根据示例数据生成表格数据格式,titleSpan为标签栅格宽度,valueSpan为数据宽度

cellData.value.push({
    "title": "姓名",
    "value": renyuanData.value.xm,
    "titleSpan": 3,
    "valueSpan": 3
})
cellData.value.push({
    "title": "性别",
    "value": renyuanData.value.xb_dictText,
    "titleSpan": 3,
    "valueSpan": 3
})

cellData.value.push({
    "title": "出生年月",
    "value": renyuanData.value.cssj,
    "titleSpan": 3,
    "valueSpan": 4
})
cellData.value.push({
    "title": "民族",
    "value": renyuanData.value.mz,
    "titleSpan": 3,
    "valueSpan": 3
})
cellData.value.push({
    "title": "籍贯",
    "value": renyuanData.value.jg,
    "titleSpan": 3,
    "valueSpan": 5
})
cellData.value.push({
    "title": "出生地",
    "value": renyuanData.value.csd,
    "titleSpan": 3,
    "valueSpan": 4
})
cellData.value.push({
    "title": "工作时间",
    "value": renyuanData.value.cjgzsj,
    "titleSpan": 3,
    "valueSpan": 5
})

cellData.value.push({
    "title": "政治面貌",
    "value": renyuanData.value.zzmm + renyuanData.value.jrsj,
    "titleSpan": 3,
    "valueSpan": 4
})
cellData.value.push({
    "title": "现专业",
    "value": "",
    "titleSpan": 3,
    "valueSpan": 8
})
cellData.value.push({
    "title": "用工形式",
    "value": renyuanData.value.rylb1_dictText,
    "titleSpan": 3,
    "valueSpan": 5
})
cellData.value.push({
    "title": "健康状况",
    "value": "",
    "titleSpan": 3,
    "valueSpan": 4
})
cellData.value.push({
    "title": "所在单位",
    "value": renyuanData.value.orgCode_dictText,
    "titleSpan": 3,
    "valueSpan": 6
})
cellData.value.push({
    "title": "专业技术资格",
    "value": renyuanData.value.zc + renyuanData.value.zcsj,
    "titleSpan": 4,
    "valueSpan": 8
})

cellData.value.push({
    "title": "职业资格等级",
    "value": renyuanData.value.zc + renyuanData.value.zcsj,
    "titleSpan": 4,
    "valueSpan": 8
})
//空对象,用于占位
cellData.value.push({
    "title": "",
    "value": "",
    "titleSpan": 0,
    "valueSpan": 0
})

cellData.value.push({
    "title": "职务(岗位)",
    "value": renyuanData.value.zc + renyuanData.value.zcsj,
    "titleSpan": 4,
    "valueSpan": 8
})

cellData.value.push({
    "title": "职位级别",
    "value": "",
    "titleSpan": 4,
    "valueSpan": 8
})
cellData.value.push({
    "title": "",
    "value": "",
    "titleSpan": 0,
    "valueSpan": 0
})

引用页代码
```vue
<template>
    <view>
        <scroll-view :scroll-x="true" :scroll-y="true">
            <view>
                <yjly-row-cell :cellData="cellData" :rowDataCount="3"></yjly-row-cell>
            </view>
        </scroll-view>
    </view>
</template>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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