在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说这样的需求不可行。
网友评论