根据中英文表,渲染table--title

197 阅读1分钟

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
     })