1. 从后端请求的数据中包含table数据源,和中英文表
const getDetailPage = (currentPage,pageSize,id) => {
postRequest('/api/military/metaData/getDataDetail', {currentPage,pageSize,id}).then(res => {
console.log(res , '数据详情')
if (res.code == 20000) {
if(res.data.url === null){
setDataSource2(res.data.list)
setEnToCn(res.data.enToChList)
}
if(res.data.url !==null){
setDataUrl(res.data.url)
console.log("获取url")
}
}
else if(res.code == 40003){
}
else {
message.error('获取列表失败')
}
})
}
2、将独立的中文和英文重新组合成有对应关系的对象,需要index顺序相同
var enToCnData= {}
enToCn && enToCn.map(item => {
enToCnData[item.enName] = item.chName
},{})
3、遍历数据源,生成column,需要拿到column的title和dataIndex,这里的title就是先拿到数据源的大写英文,再转换为小写英文,根据生成的中英文对照表,对照出中文,这里的dataIndex,是大写的英文,最后将遍历的column返回一个新的数组对象
let columns2 = dataSource2 && dataSource2.map(item=> {
let myTitleArr
let myDataArr
let selectColumn = Object.keys(item).map(n=>{
let transData
transData = n.toLowerCase()
if(enToCnData[transData]){
myTitleArr = enToCnData[transData]
myDataArr = n
}
return {
title: enToCnData[transData],
dataIndex: n,
width:120,
ellipsis: {
showTitle: false,
},
render: n=> (
<Tooltip placement="topLeft" title={n}>
{n}
</Tooltip>
)
}
})
return selectColumn
})