6. ant-design-vue table align 表头表体分别设置居左 居右

const columns = [
         {
          title: '日期',
          dataIndex: 'date',
          width: 120
        },
        {
          title: '收货信息',
          align: 'left',
          children: [
            {
              title: '收货人姓名',
              dataIndex: 'name',
              width: 100,
            },
            {
              title: '收货人地址',
              align: 'left',
              children: [
                {
                  title: '省',
                  dataIndex: 'province',
                  width: 100,
                },
                {
                  title: '市',
                  dataIndex: 'city',
                  width: 100,
                },
                {
                  title: '详细地址',
                  dataIndex: 'adress',
                  ellipsis: true,
                  width: 100,
                },
                {
                  title: '订单金额',
                  dataIndex: 'amount',
                  width: 150,
                   //align:'center',//--这个不能再设置,会默认居左,如果设置了会覆盖下面的right
                  customRender:(value, row, index) => {//表体的数据列样式
                    console.log(value,row,index)//本列的值,所有行数据包括本列,第几列
                    const obj = {
                        children: value,
                        attrs: {},
                      };
                      obj.attrs.align = 'right';
                      return obj;
                  }
                },
              ]
            },
          ]
        },
        {
          title: '能否本人签收',
          dataIndex: 'recive',
          width: 120,
        },
        {
          title: '预计签收日期',
          dataIndex: 'date1',
          width: 120,
        },
      ]

const data = [
  {
    key: 0,
    date: '2021-06-18',
    name: '小蓉儿',
    province: '江苏省',
    city: '南通市',
    adress: '白蒲镇林梓镇',
    amount: '1000,000.00',
    recive:'否',
    date1: '2021-06-21'
  },
  {
    key: 1,
    date: '2021-06-18',
    name: '小蓉儿1',
    province: '上海市',
    city: '松江区',
    adress: '翠婷别墅',
    amount: '1000,000.00',
    recive:'否',
    date1: '2021-06-22'
  },
  {
    key: 2,
    date: '2021-06-18',
    name: '小蓉儿2',
    province: '上海市',
    city: '浦东新区',
    adress: '成山路',
    amount: '1000,000.00',
    recive:'是',
    date1: '2021-06-23'
  },
];

说明:

控件默认表格的表头、表体文本居左显示,但如果是多级表头列的情况下,多级的表头是居中的,如一级二级标题要居左,要特殊处理,如下图所示:

对于表头居左,表体数字类居右说明,如果给订单金额字段添加 align:’right’,表头表体都会居右,如下图:

那么就需要通过customRender:()=>{} 特殊处理,同时align:’right’,不能再设置了:

customRender:(value, row, index) => {//表体的数据列样式
    console.log(value,row,index)//本列的值,所有行数据包括本列,第几列
    const obj = {
        children: value,
        attrs: {},
      };
       obj.attrs.align = 'right';
       return obj;
}

posted @   小蓉儿  阅读(6223)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示