如何解决antd中table有scroll，展开行错位的问题

在antd官网中，Table表格的用法，列出了大量的可执行的情况。

例如：固定某一方向，可以滑动

WechatIMG4725.jpeg

例如：表格展开第二项

WechatIMG4726.jpeg

你开开心心，想找着既可以滑动，又可以展开的。居然没有，what！？～

打开github 戳->https://github.com/ant-design/ant-design/issues/9900

人家都告诉你了，【展开行不能跟固定列一起用】。

没办法👐，出现线上问题还得改。

so～彩蛋解决办法来了。


<Table

  columns={this.columns()}

  rowKey={row => {

    row.basic && row.basic.shop_id;

  }}

  dataSource={data}

  pagination={{

    showSizeChanger: true,

    onChange: onPageChange,

    onShowSizeChange: onPageChange,

    current: pagination.page,

    pageSize: pagination.page_size,

    total: total,

    pageSizeOptions: ["10", "20", "30"]

  }}

  bordered

  loading={loading}

  scroll={{ x: 3550, y: 600 }}

  expandedRowRender={this.expandedRowRender}

/>

// 部分代码

expandedRowRender(record) {

  if (record.basic.sub_status === 0) {

    return <div>无子门店</div>;

  }

}

let head = [

  <div className="ChildUnit" key={-1}>

    <span>a1</span>

    <span>a2</span>

    <span>a3</span>

    <span>a4</span>

    <span>a5</span>

    <span>a6</span>

    <span>a7</span>

    <span>a8</span>

    <span>a9</span>

    <span>a10</span>

  </div>,

}

// 部分代码

ecord.trade_data.forEach((item, index) => {

  head.push(

    <div className="ChildUnit" key={index}>

    <span>{item.id !== 0 ? item.id : '-'}</span>

  <span>

    {item.name !== ''

      ? item.name

      : record.basic.shop_name}

  </span>

  <span>{item.auth_volume}</span>

  <span>{formatPrice(item.auth_turnover, true)}</span>

  <span>{item.pay_volume}</span>

  <span>{formatPrice(item.pay__turnover, true)}</span>

  <span>{item.period_no_quick_volume}</span>

  <span>{item.period_quick_volume}</span>

  <span>{formatPrice(item.period_all_turnover, true)}</span>

  <span>{formatPrice(item.period_per_customer_trans, true)}</span>

</div>)

}

如果你们的代码也是类似以上结构，那么你们所固定一方与可滑动的一方将会渲染两次expandedRowRender里面的值，并且，固定方（宽度占两格），滑动方（宽度占22格）。你们会发现，页面简直串位到不能看。

修改想法💡：

1、因为expandedRowRender会调用两次，是否可以用计数法进行控制。

2、前端离不开样式的渲染。


// 部分修改代码：

expandedRowRender = record => {

  if (this.times === 2) {

    this.times = 0;

  }

  if (!this.times) {

    this.times = 1;

  } else if (this.times === 1) {

    this.times = 2;

}

  if (record.basic.sub_status === 0) {

    return <div>无子门店</div>;

  }

  if (record.trade_data.length === 0) {

    return <div>暂无子门店数据</div>;

  }

let head = [

  <div className="ChildUnit" key={-1}>

    {this.times === 2 ? (

      <React.Fragment>

         <span>a1</span>

         <span>a2</span>

    </React.Fragment>

  ) : this.times === 1 ? (

    <React.Fragment>

      <span>a1</span>

      <span>a2</span>

      <span>a3</span>

      <span>a4</span>

      <span>a5</span>

      <span>a6</span>

      <span>a7</span>

      <span>a8</span>

      <span>a9</span>

      <span>a10</span>

  </React.Fragment>

) : null}

</div>

];

record.trade_data.forEach((item, index) => {

  head.push(

    <div className="ChildUnit" key={index}>

      {this.times === 2 ? (

    <React.Fragment>

      <span>{item.id !== 0 ? item.id : "-"}</span>

      <span>

    {item.name !== ""

        ? item.name

        : record.basic.shop_name}

      </span>

    </React.Fragment>

  ) : this.times === 1 ? (

    <React.Fragment>

      <span>{item.id !== 0 ? item.id : "-"}</span>

      <span>

        {item.name !== ""

          ? item.name

          : record.basic.shop_name}

      </span>

      <span>{item.auth_volume}</span>

      <span>{formatPrice(item.auth_turnover, true)}</span>

      <span>{item.pay_volume}</span>

      <span>{formatPrice(item.pay_turnover, true)}</span>

      <span>{item.period_no_quick_volume}</span>

      <span>{item.period_quick_volume}</span>

      <span>{formatPrice(item.period_all_turnover, true)}</span>

      <span>{formatPrice(item.period_per_customer_trans, true)}</span>

  </React.Fragment>

) : null}

</div>

);

});

最终展示效果：（已将真实数据修改了一下，但是应该看得懂）

WechatIMG4724.jpeg

通过this.times的方法，控制了左边固定的列和右边可滑动的列渲染出来的值。

ps：通过实践得出，expandedRowRender执行两次，第一次是执行右边可以滑动的。
第二次执行左边固定的。所以times的取值，大家都看得到了。在进行简单的css样式调整。

至于固定了两边或者其他类似情况，不妨用改方法实践一下。

最好的办法就是，赶紧和pm说这样的需求不可行。