Modal中的ali-react-table树形展开关闭导致自适应高度变化怎么加过渡
时间: 2024-01-10 07:04:33 浏览: 24
您可以使用 CSS 过渡来实现 ali-react-table 树形展开关闭时的自适应高度变化。具体实现步骤如下:
1. 在你的 CSS 文件中添加以下代码,设置过渡效果:
```
.table-row {
transition: height 0.3s ease-in-out;
}
```
2. 在你的组件中,使用 `onTreeExpand` 和 `onTreeCollapse` 属性来监听树形展开和关闭事件,然后在事件处理程序中动态修改表格行的高度:
```
import Table from 'ali-react-table';
class MyTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [...],
expandedRowKeys: [],
};
this.handleTreeExpand = this.handleTreeExpand.bind(this);
this.handleTreeCollapse = this.handleTreeCollapse.bind(this);
}
handleTreeExpand(expandedRowKeys) {
this.setState({
expandedRowKeys,
});
// 在展开时动态修改行高
setTimeout(() => {
const rows = document.querySelectorAll('.table-row.expanded');
rows.forEach(row => {
row.style.height = `${row.scrollHeight}px`;
});
}, 0);
}
handleTreeCollapse(expandedRowKeys) {
this.setState({
expandedRowKeys,
});
// 在关闭时动态修改行高
setTimeout(() => {
const rows = document.querySelectorAll('.table-row.expanded');
rows.forEach(row => {
row.style.height = 'auto';
});
}, 0);
}
render() {
const columns = [...];
const { data, expandedRowKeys } = this.state;
return (
<Table
columns={columns}
dataSource={data}
onTreeExpand={this.handleTreeExpand}
onTreeCollapse={this.handleTreeCollapse}
expandedRowKeys={expandedRowKeys}
/>
);
}
}
```
这样,当你展开或关闭树形行时,就能够看到平滑的过渡效果了。