ANT-DESIGN TABLE格式化表格数据

最新推荐文章于 2024-06-06 16:00:54 发布

灿烂牵羊

最新推荐文章于 2024-06-06 16:00:54 发布

阅读量979

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_37107017/article/details/126049493

版权

ANT-DESIGN TABLE格式化表格数据

目的是将表格中的某些列值增加百分号

a-table中的columns列，在需要格式化的列增加customRender属性，自定义格式化形式即可

columns: [
        // {
        //   title: '计算记录ID',
        //   dataIndex: 'calculateRecordId',
        //   ellipsis: true,
        //   align: 'center'
        // },
        {
          title: '开料尺寸',
          dataIndex: 'cuttingSize',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '开料尺寸种类排序',
          dataIndex: 'sort',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '规格种类数',
          dataIndex: 'specificationTypeNumber',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '订单品种数',
          dataIndex: 'orderVarietiesNumber',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '订单覆盖率',
          dataIndex: 'orderCoverage',
          ellipsis: true,
          align: 'center',
          customRender:(text)=>{
            if (text != null) {
              return text + '%'
            }
          }
        },
        {
          title: '规格覆盖率',
          dataIndex: 'specificationCoverage',
          ellipsis: true,
          align: 'center',
          customRender:(text)=>{
            if (text != null) {
              return text + '%'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]