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