【前端】数据处理

1、校验是否缺少必填字段

const tableHeader = ['测站编码', '曲线名称', '启用时间', '点序号', '水位(m)', '流量(m³/s)'];function checkMissingFields(tableHeader) {const requiredFields = ['*曲线名称', '*水位(m)', '*测站编码', '*流量(m³/s)'];const missingFields = [];requiredFields.forEach(criticalField => {if (!tableHeader.includes(criticalField)) {missingFields.push(criticalField);}});if (missingFields.length > 0) {console.log('缺少以下关键字段：', missingFields.join(', '));} else {console.log('所有关键字段均存在。');}
}checkMissingFields(tableHeader);'缺少以下关键字段： *曲线名称, *水位(m), *测站编码, *流量(m³/s)'

2、验证必填*数据不能为空，再读取流格式Excel时候为空的转换为-

const excelData = [{"*曲线名称": "-","*水位(m)": "1","*流量(m³/s)": "1","*测站编码": "22","启用时间": "1","点序号": "1",},  {"*曲线名称": "-","*水位(m)": "-","*流量(m³/s)": "1","*测站编码": "22","启用时间": "1","点序号": "1",},
];let emptyFields = new Set(); //去重  遍历每个数组对象，每一列的必填数据都需要对比，不能有一个为空excelData.forEach((item) => {if (item["*曲线名称"] === "-" &&item["*水位(m)"] === "-" &&item["*流量(m³/s)"] === "-" &&item["*测站编码"] === "-") {emptyFields.add("测站编码、曲线名称、水位、流量");} else {if (item["*曲线名称"] === "-") {emptyFields.add("曲线名称");}if (item["*水位(m)"] === "-") {emptyFields.add("水位");}if (item["*流量(m³/s)"] === "-") {emptyFields.add("流量");}if (item["*测站编码"] === "-") {emptyFields.add("测站编码");}}
});if (emptyFields.size > 0) {const errorMessage =[...emptyFields].join("、") + "数据为空，请重新输入后上传";console.log(errorMessage);} else {console.log("所有字段均有值，可以上传");
}'曲线名称、水位数据为空，请重新输入后上传'

3、将数组处理成elementUi中表头的格式

const tableHeader = ['*测站编码', '*曲线名称', '启用时间', '点序号', '*水位(m)', '*流量(m³/s)']function transformTableHeader(tableHeader) {return tableHeader.map((item, index) => ({label: item,prop: `propTable${index + 1}`}));
}const a=transformTableHeader(tableHeader)
console.log(a);function processTableHeaderLabel(tableHeader) {return tableHeader.map(obj => {const label = obj.label.startsWith('*') ? obj.label.slice(1) : obj.label;return { ...obj, label };});
}
const b=processTableHeaderLabel(a); 
console.log('要等表格数据处理完再去去除*',b);[ { label: '*测站编码', prop: 'propTable1' },{ label: '*曲线名称', prop: 'propTable2' },{ label: '启用时间', prop: 'propTable3' },{ label: '点序号', prop: 'propTable4' },{ label: '*水位(m)', prop: 'propTable5' },{ label: '*流量(m³/s)', prop: 'propTable6' } ]at a quokka.js:11:1'要等表格数据处理完再去去除*
[ { label: '测站编码', prop: 'propTable1' },{ label: '曲线名称', prop: 'propTable2' },{ label: '启用时间', prop: 'propTable3' },{ label: '点序号', prop: 'propTable4' },{ label: '水位(m)', prop: 'propTable5' },{ label: '流量(m³/s)', prop: 'propTable6' } ]

4、将数据处理成elementUi里表格需要的数据

const tableHeader = [{ label: "*测站编码", prop: "propTable1" },{ label: "*曲线名称", prop: "propTable2" },{ label: "*水位(m)", prop: "propTable3" },{ label: "*流量(m³/s)", prop: "propTable4" },{ label: "启用时间", prop: "propTable5" },{ label: "点序号", prop: "propTable6" }];const excelData = [{"*曲线名称": "-","*水位(m)": "1","*流量(m³/s)": "1","*测站编码": "22","启用时间": "1","点序号": "1",},{"*曲线名称": "-","*水位(m)": "-","*流量(m³/s)": "1","*测站编码": "22","启用时间": "1","点序号": "1",},
];function transformTableData(tableHeader, excelData) {return excelData.map((item) => {let rowData = {};Object.keys(item).forEach((value) => {const propItem = tableHeader.find((p) => p.label === value);rowData[propItem.prop] = item[value];});return { ...rowData };});
}
const a=transformTableData(tableHeader, excelData);
console.log(a);[ { propTable2: '-',propTable3: '1',propTable4: '1',propTable1: '22',propTable5: '1',propTable6: '1' },{ propTable2: '-',propTable3: '-',propTable4: '1',propTable1: '22',propTable5: '1',propTable6: '1' } ]

5、现在有下拉框，可以选取表头，并将该表头对应的列数据全部存入下拉框中

const stationCode = "propTable1";const tableData = [{propTable2: "-",propTable3: "1",propTable4: "1",propTable1: "22",propTable5: "1",propTable6: "1",},{propTable2: "-",propTable3: "-",propTable4: "1",propTable1: "22",propTable5: "1",propTable6: "1",},
];
const  arr=tableData.map(row => row[stationCode]);
console.log(arr);
[ '22', '22' ]

补充下拉框选中时候，列的数据类型判断

let stationCode = "propTable1";
const dateTimeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
const tableData = [{propTable2: "-",propTable3: "1",propTable4: "1",propTable1: "19992-11-11 11:11:11",propTable5: "1",propTable6: "1",},{propTable2: "-",propTable3: "-",propTable4: "1",propTable1: "22",propTable5: "1",propTable6: "1",},
];
for (let i = 0; i < tableData.length; i++) {const row =tableData[i];const value = row[stationCode];console.log('🚀 ~ handleSelectChange ~ value:', value);// 判断值是否不是 'YYYY-MM-DD HH:mm:ss' 格式if (!dateTimeRegex.test(value)) {console.log('value不是YYYY-MM-DD HH:mm:ss格式');return}
}
//通过上面数据才赋值
// if (typeof value !== 'number' || !Number.isInteger(value)) //value不是整数