项目需求:一个产品树,当点击一个节点的时候获取当前节点以及所有父级节点的id,并调用兄弟组件(form组件)的方法进行查询操作,查询的结果需要渲染在table组件中。
1.首先明确这个页面的组件结构,是由 Tree、Form、Table组件组成。
// index.js 父组件
<Card bordered={false} title="商品SPU列表" className={style.antCardBox}>
<div className={style.antTreeBox}>
<OrderTree/>
</div>
<div style={
{ flex: '1' }}>
<OrderForm />
<OrderTable />
</div>
</Card>
来看下页面渲染结果,使用flex布局,左边Tree组件宽度固定,右边自适应剩余空间。同时Tree中节点文字过长会省略号...展示,并且鼠标悬浮提示全部内容。
css样式:
.antCardBox {
:global {
.ant-card-body {
display: flex !important;
}
}
}
.antTreeBox {