Ant Design使用 Table组件实现内容居中的效果

未居中效果

constructor(props) {
    super(props);
    this.state = {
      Dates: [], // 数据
      // 待审核所有列
      columnsWait: [
        {
          title: "文章首图",
          dataIndex: "imgUrl",
          key: "imgUrl",
        },
        {
          title: "文章标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "关联商品",
          dataIndex: "connectShop",
          key: "connectShop",
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate3",
        },
      ],  
    };
  }

未居中效果截图

image.png

---

居中效果

constructor(props) {
    super(props);
    this.state = {
      Dates: [], // 数据
      // 待审核所有列
      columnsWait: [
        {
          title: "文章首图",
          dataIndex: "imgUrl",
          key: "imgUrl",
          align: 'center',// 设置文本居中
        },
        {
          title: "文章标题",
          dataIndex: "title",
          key: "title",
          align: 'center',// 设置文本居中
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          align: 'center',// 设置文本居中
        },
        {
          title: "关联商品",
          dataIndex: "connectShop",
          key: "connectShop",
          align: 'center',// 设置文本居中
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate3",
          align: 'center',// 设置文本居中
        },
      ],  
    };
  }

居中效果截图

image.png