React在Table组件中使用DatePicker组件

作者: 燕自浩 | 来源:发表于2020-03-10 18:25 被阅读0次

React在Table组件中使用DatePicker组件
React为button添加OnClick事件
el-image设置lazy之后滚动不会进行加载
高阶组件
elementui中el-table-column里显示两个后台
element-ui 二次封装表格以及添加、编辑dialog
React 的几个注意点
React基础-defaultProps与子元素
第9节 React中的父子组件及传值2019-05-26
React Native 架构之 Redux介绍

需求：在一个table组件中使用DatePicker组件编辑当前条信息其中里面包含了时间，在我直接用的时发现如图二所示的情况

需求图

image.png
这个时候只能通过下滑的方式实现选中你想要的日期，我首先想到的是层级的原因造成的于是我审查元素一级一级的查找之后发现在table自带的样式中有overflow-x: scroll;这个属性而且overflow-x和overflow-y不能同时作用，具体原因可查看相关文档，在了解到不能改变css样式实现之后我决定改变时间弹出框的位置实现然后在antd文档中找到getCalendarContainer属性，其说明是当不满足当前位置时可以通过该属性进行更换显示的位置，getPopupContainer={()=>document.getElementById('Select')}, select是你想要显示位置的id也可以通过class来定义，当然用id最好，这里提议用id,废话不多说上代码

                <DatePicker
                  placeholder='请选择时间'
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  getCalendarContainer={() => 
                    document.getElementById('test')
                  }
                />)}

然后在你想要显示的地方添加id='test'即可最终的效果图是