在antd官網(wǎng)中，Table表格的用法赶舆，列出了大量的可執(zhí)行的情況哑姚。
例如：固定某一方向，可以滑動
WechatIMG4725.jpeg
例如：表格展開第二項
WechatIMG4726.jpeg
你開開心心芜茵，想找著既可以滑動叙量，又可以展開的。居然沒有九串，what＝逝濉寺鸥？～
打開github 戳->https://github.com/ant-design/ant-design/issues/9900
人家都告訴你了，【展開行不能跟固定列一起用】品山。
沒辦法??胆建，出現(xiàn)線上問題還得改。
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>)
}
如果你們的代碼也是類似以上結(jié)構(gòu)笆载，那么你們所固定一方與可滑動的一方將會渲染兩次expandedRowRender里面的值，并且酸些，固定方（寬度占兩格）宰译，滑動方（寬度占22格）檐蚜。你們會發(fā)現(xiàn)魄懂，頁面簡直串位到不能看。
修改想法??：
1闯第、因為expandedRowRender會調(diào)用兩次市栗，是否可以用計數(shù)法進行控制。
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>暫無子門店數(shù)據(jù)</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>
);
});
最終展示效果：（已將真實數(shù)據(jù)修改了一下，但是應(yīng)該看得懂）
WechatIMG4724.jpeg
通過this.times的方法咙好，控制了左邊固定的列和右邊可滑動的列渲染出來的值篡腌。
ps：通過實踐得出，expandedRowRender執(zhí)行兩次勾效，第一次是執(zhí)行右邊可以滑動的嘹悼。
第二次執(zhí)行左邊固定的。所以times的取值层宫，大家都看得到了杨伙。在進行簡單的css樣式調(diào)整。
至于固定了兩邊或者其他類似情況萌腿，不妨用改方法實踐一下限匣。
最好的辦法就是，趕緊和pm說這樣的需求不可行毁菱。
