a543462378 2022-06-09 10:32 采纳率: 84.7%
浏览 43
已结题

这种vue表格要怎么写

vue项目要把之前一个react+antd的表格展示出来,现在要用vue+element实现,表格前两列是固定的,要怎么写?
表格样式

img


原来react的代码

<Table
          size='middle'
          bordered
          loading={loading}
          dataSource={list}
          pagination={false}
        >
          <Column width={'15%'} title="船舶种类" colSpan={2} align='center' render={(text, row, index) => {
            const obj = {
              children: '内河集装箱船舶',
              props: {
                rowSpan: 0,
              }
            };
            if (index === 0) {
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            if (index === 1) {
              obj.children = '内河滚装船舶';
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            if (index === 2) {
              obj.children = '内河干散货船舶';
              obj.props.rowSpan = 2;
            }
            if (index === 3) {
              obj.children = '内河干散货船舶';
              obj.props.rowSpan = 0;
            }
            if (index === 4) {
              obj.children = '内河多用途船舶';
              obj.props.rowSpan = 2;
            }
            if (index === 5) {
              obj.children = '内河多用途船舶';
              obj.props.rowSpan = 0;
            }
            if (index === 6) {
              obj.children = '江海直达船舶';
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            if (index === 7) {
              obj.children = '海进江船舶';
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            if (index === 8) {
              obj.children = '其他运输船舶';
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            if (index === 9) {
              obj.children = '合计';
              obj.props.rowSpan = 1;
              obj.props.colSpan = 2;
            }
            return obj;
          }} />
          <Column width={'15%'} title="船舶类型" colSpan={0} align='center' render={(text, row, index) => {
            const obj = {
              children: '2000载重吨以上',
              props: {
                rowSpan: 0,
              }
            }
            if (index === 2 || index === 4) {
              obj.children = '2000载重吨以上';
              obj.props.rowSpan = 1;
            }
            if (index === 3 || index === 5) {
              obj.children = '其他';
              obj.props.rowSpan = 1;
            }
            return obj;
          }} />
          <ColumnGroup width={'70%'} title='具备受电设施船舶'>
            <ColumnGroup title='本月完成改造'>
              <Column title='低压' align='center' dataIndex='lowMonth' />
              <Column title='高压' align='center' dataIndex='highMonth' />
            </ColumnGroup>
            <ColumnGroup title='具备受电设施船舶数(艘)'>
              <Column title='低压' align='center' dataIndex='sufferShipLow' />
              <Column title='高压' align='center' dataIndex='sufferShipHigh' />
            </ColumnGroup>
          </ColumnGroup>

        </Table>
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-06-09 11:03
    关注

    合并单元格不行吗?

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 6月24日
  • 已采纳回答 6月16日
  • 创建了问题 6月9日

悬赏问题

  • ¥15 Stata链式中介效应代码修改
  • ¥15 latex投稿显示click download
  • ¥15 请问读取环境变量文件失败是什么原因?
  • ¥15 在若依框架下实现人脸识别
  • ¥15 添加组件无法加载页面,某块加载卡住
  • ¥15 网络科学导论,网络控制
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错