需求:
有两个div的区域来展示字段,字段比较多,区域内设置纵向滚动条,要求可以根据字段名进行对div区域内的字段进行搜索,搜到的字段展示在第一个位置,同时滚动条自动回到顶部。
思路:
1. 对两个div设置高度height,同时设置overFlow-Y:auto属性,显示纵向滚动条。
2. 拿到的所有字段,处理成数组进行遍历展示。对搜索的数据先从数组中删除,再使用splice方法重新插入,放在第一个位置。
getFieldNewValue = fieldItem => {
const inputValue = _.get(this.props.form.getFieldsValue(), 'inputValue');
let fieldItemNew = _.cloneDeep(fieldItem);// 深拷贝拿到一个新的变量,且不影响老的变量
if (inputValue) {
const searchValue = _.find(fieldItem, i => i.name === inputValue); // 找到搜索数据
fieldItemNew = _.filter(fieldItemNew, item => item.name !== inputValue); // 删除
fieldItemNew.splice(0, 0, searchValue);// 重新插入数组第一个位置
return fieldItemNew;
}
return fieldItem;
};
3. 在搜索数据同时,根据div的id属性,使用scrollTo(0,0)方法使滚动轴显示在顶部。(注意:当多个地方同时用到这个组件时,要保证每个页面的div的id属性是动态变化,否则会出现多个相同的地方,只有一个会正常滚动到顶部的现象)
handleSelected = value => {
const { urlId } = this.props;
document.getElementById(`${urlId}T1`).scrollTo(0, 0);
document.getElementById(`${urlId}T2`).scrollTo(0, 0);
};