214 lines
4.5 KiB
Markdown
214 lines
4.5 KiB
Markdown
# 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": "24****78",
|
||
"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为数据宽度
|
||
|
||
```javascript
|
||
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>
|
||
```
|