开场诗
-岁暮阴阳催短景，天涯霜雪霁寒宵。
-
五更鼓角声悲壮，三峡星河影动摇。
-
野哭千家闻战伐，夷歌数处起渔樵。
-
卧龙跃马终黄土，人事音书漫寂寥。
一、序言
大家好，这里是流光的频道，又到了和大家分享的时间，最近在工作中遇到了两个比较有意思的点和大家分享一下。
遇到的问题
1.查询条件过多如何展示
大家都遇到过一个页面上面是搜索框下面是展示的table，通过上面的查询条件。下方实时的变换展示内容，但是当上方查询条件多达10多个的时候页面可能就不太美观造成下方的数据看不多（如图一所示）
图一
2.如何根据自己需求动态更改日期选择框的时间范围
大家在实际工作中肯定会用到过RangePicker时间范围的选择框他里面有本月、本周、本年等等选择范围以本月举例，当我选择本月它默认是从1号到30或者31号但是如果我想要的是上月25号到本月24号算一个月他就没有办法进行选择。当我选择本月它如图二所示
如何解决
1.动态控制显示查询条件
我的想法是当我查询的时候把一些经常用的查询条件放在外面，不经常用的通过一个按钮来控制它的显示与隐藏，通过这个想法我想了两个解决方法：
1通过使用SearchFormer（公司内部自家研发的组件库）自带的extraButtons来控制展示与隐藏
通过按钮的点击函数来控制useState变量highsearch的true或false来动态显示不同展示内容 
但是好像ant的组件库没有这个组件所以我贴和ant的组件库想到通过javascript代码来动态向组件里面添加一个按钮给它先找到包裹组件的div
js
useEffect(() => {
// 创建一个按钮元素
var button = document.createElement('button');
// 设置按钮文本
button.innerHTML = '高级查询';
//设置点击函数
button.onclick = onHandleHigh()
// 获取 div 元素
var div = document.querySelector('hv-search-former-buttons');
// 将按钮添加到 div 元素中
div.appendChild(button);
}, []);
//还可以通过button.style来设置样式效果如下GIF
2.自定义时间框日期范围
通过重写时间框的ranges方法自定义时间范围
js
//时间框
<RangePicker
allowClear={false}
style={{ width: '100%' }}
onChange={onChange2}
ranges={getRanges()}
/>
// 获取上个月的25号到本月的24号的时间范围
const getLastMonthRange = () => {
const startDate = moment()
.subtract(1, 'months')
.date(25);
const endDate = moment().date(24);
return [startDate, endDate];
};
// 根据月份设置不同的时间范围
const getRanges = () => {
console.log(moment());
console.log(moment().startOf('week'));
if (moment(new Date(), 'MM') === 1) {
return {
今天: [moment(), moment()],
本月: [moment().date(1), moment().date(24)],
本周: [moment().startOf('week'), moment().endOf('week')],
本年: [moment().startOf('year'), moment().endOf('year')]
};
}
if (moment(new Date(), 'MM') === 12) {
return {
今天: [moment(), moment()],
本月: [
moment()
.subtract(1, 'months')
.date(25),
moment().date(31)
],
本周: [moment().startOf('week'), moment().endOf('week')],
本年: [moment().startOf('year'), moment().endOf('year')]
};
}
// 其他月份的处理
return {
今天: [moment(), moment()],
本月: getLastMonthRange(),
本周: [moment().startOf('week'), moment().endOf('week')],
本年: [moment().startOf('year'), moment().endOf('year')]
};
};
随想
今天的分享就到这里了大家如果有更好的办法欢迎大家留言讨论