1：页面表格结构
<el-scrollbar v-if="tableData.length>0">
<div style="width: 100%; height: 500px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="tableData"
:width="width"
:height="height"
:row-class="tableRowClassName"
fixed
/>
</template>
</el-auto-resizer>
</div>
<div style="margin-top: 10px" v-if="tableData.length>0">
共
<el-link type="primary" style="font-size: 20px">{{
tableData.length
}}</el-link>
条数据
</div>
</el-scrollbar>2：数据
export default {
"code": 200,
"success": true,
"errorMsg": null,
"data": {
"PPC": [{
"Table ID": "PPC",
"Table Field Name": "DATA_VERSION_CODE",
"Data Type": "Char",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "I",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "LETTERFLAG",
"Data Type": "Char",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "Y",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "AD_TRAYFLAG",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 4,
"Format": null,
"Remarks": "0000",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "MAIL_AREA",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": 1,
"Max Length": 1,
"Format": null,
"Remarks": "L",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "HARDCOPY",
"Data Type": "Char",
"Min Occurrence ": "0",
"Max Occurrence": 1,
"Max Length": 1,
"Format": null,
"Remarks": "Y",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "PAPER",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": 1,
"Max Length": 1,
"Format": null,
"Remarks": "D",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "BANK_CODE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 3,
"Format": null,
"Remarks": "012",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "BRANCH_CODE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 3,
"Format": null,
"Remarks": 111,
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "SRV_BRANCH_CODE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 3,
"Format": null,
"Remarks": "222",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "DEPT_CODE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 10,
"Format": null,
"Remarks": "123",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "CIN_ID",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "9999999999 CIN_ID and ACCOUNT_NO either one have value",
"Type": "num"
},
{
"Table ID": "PPC",
"Table Field Name": "ACCOUNT_NO",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 18,
"Format": null,
"Remarks": "\"012-875-1-013212-2\", CIN_ID and ACCOUNT_NO either one have value",
"Type": "num"
},
{
"Table ID": "PPC",
"Table Field Name": "ACCOUNT_DATE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 8,
"Format": null,
"Remarks": "\"20191214\"",
"Type": "date"
},
{
"Table ID": "PPC",
"Table Field Name": "STATEMENT_ID",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 20,
"Format": null,
"Remarks": "SBM-O-ADV2",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "LANGUAGE_TYPE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 2,
"Format": null,
"Remarks": "ET",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "STAT_SOURCE_APP_CODE",
"Data Type": "String",
"Min Occurrence ": " ",
"Max Occurrence": "1",
"Max Length": 3,
"Format": null,
"Remarks": "SBM",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "TYPE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "N",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "HOST_DATE",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 8,
"Format": null,
"Remarks": "\"20140226\", YYYYMMDD - This date should be an actual date. MDP will check this date if it matches with current date in order to start the message delivery job. If TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "HOST_TIME",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 6,
"Format": null,
"Remarks": "\"091359\", HHMMSS. If TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "REFERENCE_NUMBER",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "\"0000000000000000000\". If TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "MEDIA_MODE",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "\"S\" – triggered by bank\n\"C\" – requested by customers\nIf TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "SRC_AC_NO.",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 16,
"Format": null,
"Remarks": "\"0000000000000000\", Provided if any when TYPE is \"M\" or \"S\". If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "PHONE_NUMBER",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 22,
"Format": null,
"Remarks": "\"123456799199999 \", (Left justified and fill with spaces). If TYPE is \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "EMAIL_ADDRESS",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 60,
"Format": null,
"Remarks": "\"alan_wlwong@bochk.com \", (Left justified and fill with spaces). If TYPE is \"M\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "FROM_EMAIL_ADDRESS",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 60,
"Format": null,
"Remarks": "\"cbs_inf@bochk.com \", (Left justified and fill with spaces). If TYPE is \"M\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "EMAIL_SUBJECT",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 200,
"Format": null,
"Remarks": "\"E-alert for BOCHK's EBPP Service \", (Left justified and fill with spaces). If TYPE is \"M\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "EMAIL_LANGUAGE",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "\"C\" – Chinese,\n\"S\" – Simplified Chinese,\n\"E\" – English,\nIf TYPE is \"M\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "SMS_LANGUAGE",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "\"C\" – Chinese,\n\"E\" – English,\nIf TYPE is \"S\", this field should be provide. If TYPE is \"N\", this field can be empty. This field value suggest use \"E\". For detail refer to MDP specification.",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "MESSAGE_LENGTH",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 4,
"Format": null,
"Remarks": "\"057\", Message Content Length (Eng x 1, Chi x 3). If TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "MESSAGE_CONTENT",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 1000,
"Format": null,
"Remarks": "\"12210006#CHILDREN'S CANCER FOUNDATION#兒童癌病基金# \", \"parameter1#parameter2#parameter3#\", 1000 bytes (Eng x 1, Chi x 3), Left justified and fill with spaces. If TYPE is \"M\" or \"S\", this field should be provide. If TYPE is \"N\", this field can be empty",
"Type": "N/A"
},
{
"Table ID": "PPC",
"Table Field Name": "INSERT_ENVELOP",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 2,
"Format": null,
"Remarks": "",
"Type": "set as spaces"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_1",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_2",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_3",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_4",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_5",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_6",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_7",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_8",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_9",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_10",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_11",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_12",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_13",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_14",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "NON_PRIMARY_CIN_ID_15",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 19,
"Format": null,
"Remarks": "",
"Type": "set as zeros"
},
{
"Table ID": "PPC",
"Table Field Name": "ADDRESS_NO",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": "1",
"Max Length": 2,
"Format": null,
"Remarks": "it is used for generation of QR code. QR code can be used for return mail.",
"Type": "num"
},
{
"Table ID": "PPC",
"Table Field Name": "QRCODE",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "Y",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "EMAIL_TYPE",
"Data Type": "String",
"Min Occurrence ": 0,
"Max Occurrence": "1",
"Max Length": 2,
"Format": null,
"Remarks": "If no email template is required, set space here\n\n'01' - Use Template 1 \n'02' - Use Template 2 \n….\n'99' - Use Template 99 ",
"Type": "set as spaces"
},
{
"Table ID": "PPC",
"Table Field Name": "COUNTRY_CODE",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": 2,
"Format": "",
"Remarks": "HK",
"Type": "T"
},
{
"Table ID": "PPC",
"Table Field Name": "LINE_FEED",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": "1",
"Max Length": 1,
"Format": null,
"Remarks": "",
"Type": "set as spaces"
}
],
],
"SBM000": [{
"Table ID": "SBM000",
"Table Field Name": "SBM000-TABLE-ID",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": "6",
"Format": "N",
"Remarks": "SBM000",
"Type": "T"
},
{
"Table ID": "SBM000",
"Table Field Name": "SBM000-BOX-NUMBER",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "14",
"Format": "Y",
"Remarks": "999-999-99-99999-9",
"Type": "num"
},
{
"Table ID": "SBM000",
"Table Field Name": "SBM000-NAME",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "70",
"Format": "N",
"Remarks": null,
"Type": "en"
},
{
"Table ID": "SBM000",
"Table Field Name": "SBM000-ADDR1",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "35",
"Format": "N",
"Remarks": null,
"Type": "en"
},
{
"Table ID": "SBM000",
"Table Field Name": "SBM000-ADDR2",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "35",
"Format": "N",
"Remarks": null,
"Type": "en"
},
{
"Table ID": "SBM000",
"Table Field Name": "SBM000-ADDR3",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "35",
"Format": "N",
"Remarks": null,
"Type": "en"
}
],
"SBM001": [{
"Table ID": "SBM001",
"Table Field Name": "SBM001-TABLE-ID",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": "1",
"Max Length": "6",
"Format": "N",
"Remarks": "SBM001",
"Type": "T"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-DUE-DATE",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "10",
"Format": "N",
"Remarks": "YYYY/MM/DD",
"Type": "date"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-NDUE-DATE1",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "10",
"Format": "N",
"Remarks": "YYYY/MM/DD",
"Type": "date"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-NDUE-DATE2",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "10",
"Format": "N",
"Remarks": "YYYY/MM/DD",
"Type": "date"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-ATP-AC-NO",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": 1,
"Max Length": "18",
"Format": "N",
"Remarks": null,
"Type": "num"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-RENT",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "6",
"Format": "Y",
"Remarks": "999,999",
"Type": "money"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-ADD-MARG",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": 1,
"Max Length": "6",
"Format": "Y",
"Remarks": "999,999",
"Type": "money"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-TOTAL-AMT",
"Data Type": "String",
"Min Occurrence ": 1,
"Max Occurrence": 1,
"Max Length": "6",
"Format": "Y",
"Remarks": "999,999",
"Type": "money"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-PAIDBY",
"Data Type": "String",
"Min Occurrence ": "1",
"Max Occurrence": 1,
"Max Length": "1",
"Format": "Y",
"Remarks": "A",
"Type": "T"
},
{
"Table ID": "SBM001",
"Table Field Name": "SBM001-CHQNO",
"Data Type": "String",
"Min Occurrence ": "0",
"Max Occurrence": 1,
"Max Length": "10",
"Format": "N",
"Remarks": null,
"Type": "num"
}
]
},
"total": null
}3：js代码生成虚拟表
获取数据调用生成方法：
excelResult.value = res.data.data;
excelResultKeys.value = Object.keys(excelResult.value);
// 再次声明txtForm，加上excel中的key值，用于存储select值
txtForm.value = {...txtForm,...excelResultKeys.value};
// Table Field Name
(excelResultKeys.value).map(key=>{
(excelResultItems.value).push((excelResult.value)[key]);
});
// columns是excelResult返回数据的第1项的值的第0条数据的所有key值
// 比如取的SBM000的第一条的key(SBM000数据少一点，循环次数少)
let columnObj = Object.values(excelResult.value)[1][0];
// 循环所有key生成表的列头()
columns.value = generateColumns(Object.keys(columnObj));
// 获取具体每个列名(key)对应的value值
let tempDataArr = [];
Object.values(excelResult.value).map(allItem=>{
allItem.map(item=>{
tempDataArr.push(Object.values(item));
});
});
// 通过reduce依次处理tempDataArr里面的多个数组
tableData.value = generateData(columns.value,tempDataArr);4.生成列名（结构固定：key,datakey,title这些都必须有）
// 生成列名：key和dataKey需要一样都是列名
const generateColumns = (columnsArr, props) =>
Array.from(columnsArr).map((item, columnIndex) => ({
...props,
key: `${item}`,
dataKey: `${item}`,
title: `${item}`,
width: (columnIndex==1 || columnIndex==7 || columnIndex==9)?200:80,
}))5.生成表格数据（数据具体获取要看数据结构）
// 生成行内数据(传入的数据决定，且需要与列名column.dataKey进行绑定)
const generateData = (
columns,
tempDataArr
) =>
Array.from(tempDataArr).map((item, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = item[columnIndex];
return rowData;
},
{
id: `${rowIndex}`,
parentId: null,
}
)
})
8850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
