遇到问题看文档一般都可以得到解决。
table添加滚动条以后表格对不齐
官方文档给出的解释:
若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。
注意:v4 版本固定列通过 sticky 实现,IE 11 会降级成横向滚动。
但是可能还会出现上下对不齐的时候,是因为表格里有的数据太长导致的,给它指定宽度盛下它即可。
table滚动条复位
一言难尽,反正人家要求怎样,咱就怎样.
//重置表格滚动条
setTableScroll = () => {
const table = document.querySelector('.reset-scroll-table .ant-table-body');
table && table.scrollTop && (table.scrollTop = 0)
table && table.scrollLeft && (table.scrollLeft = 0)
}
reset-scroll-table
是自己给<Table/>
添加的类名,为了和其他表格作区分。在你想重置的时候调用该方法即可。我的应用场景是点击查询的时候,要复位T.T。
下拉框Select跟随页面滚动或者日期选择框DatePicker跟随页面滚动
官方文档给出的都是使用getPopupContainer
指定容器,然后给容器设置定位即可,但是getPopupContainer
对于日期选择框无效,日期选择框应使用getCalendarContainer
。可能版本升级后会统一。
Nav导航在刷新页面或者点击浏览器后退时高亮问题
使用withRouter
即可解决。
import React from 'react'
import {Layout, Menu} from 'antd'
import {withRouter} from 'react-router-dom';
const {Sider} = Layout
export default class Nav extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
go = (e) => {
this.props.history.push(`${e.key}`)
}
render() {
const {collapsed} = this.props;
const LeftSider = withRouter(({history}) => {
return (
<Menu theme="dark" mode="inline"
selectedKeys={[history.location.pathname]}
onClick={this.go}
className={css.nav}>
<Menu.Item key="/">
<Ico type="shouye"/>
<span>首页</span>
</Menu.Item>
<Menu.Item key="/orderManage">
<Ico type="baobiao"/>
<span>订单管理</span>
</Menu.Item>
<Menu.Item key="/billManage">
<Ico type="baobiao"/>
<span>账单管理</span>
</Menu.Item>
</Menu>
);
})
return (
<Sider id="app-aside" trigger={null} collapsible collapsed={collapsed} theme="light">
<LeftSider/>
</Sider>
)
}
}