更新记录
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>