antd-table⾃定义实现排序滚动条与列拉伸
antd-table ⾃定义实现排序滚动条与列拉伸
由于项⽬需求，我使⽤了ant Degisn 的Table组件，随着需求的变化，在原有的表格上增加了列排序、滚动条、列拉伸以及固定列的功能（⼀万头XX在⼼中奔腾。。。）。刚开始听到需求时，我是不以为然的，毕竟ant都提供了对应的属性和⽅法嘛，不慌！。。。结果。。。脸都肿了。
只实现单⼀功能时，ant做的很完美，但是将这些功能集合到⼀起时，就出现了表格错位等界⾯问题。（其实，我觉得很⼤可能是我没有正确使⽤）
⾏吧，那我⾃⼰写。
ps：框架是 react
列展⽰
需求是表格的列的展⽰可以由⽤户操作，实现上使⽤了，antd的filterDropdown属性：
实现逻辑很简单，通过filterDropdown属性写⼀个列多选框，根据⽤户选中的值来重新定义columns，主要涉及四个值defaultTitle：列可选
项，defaultColunms：所有⽤户可操作列，thTitle：展⽰列表头数据，columns:table需要的columns数据：
// colunms处理
// thTitle 表头
renderColumns=(thTitle)=>{
const columns =[
{
title:'#',
dataIndex:'rock',
render: text =><div className={lTitle}>{text}</div>,
align:'center',
width:40,
},// 序号列
];
thTitle.forEach(item =>{
// 由于项⽬后台需求，传递了⼀些⽤户⽆法看到但是⼜需要返回给后台的数据，所以增加了⼀个参数判断该列是否展⽰，表格所有的信息都是从后台获取if(item.flag){
columns.push({
title: item.name,
dataIndex: item.thId,element表格横向滚动条
sorter: item.isSorting,
width:140,
render: text =>(
<div className={lSql} title={text}>
{text}
</div>
),
// option：将请求回来的表格的所有列名称存⼊defaultTitle，作为多选框可选项
// defaultValue：在第⼀次展⽰时，有些列可能默认不展⽰，这⾥需要根据传回来的数据进⾏判断啦
// value：这⾥传⼊⽤户操作后的值
filterDropdown:()=>(
<div className={styles.customFilterDropdown}>
<CheckboxGroup
options={defaultTitle}
defaultValue={defaultShowTitle}
value={this.state.thTitle.length >0?this.state.thTitle : defaultTitle}
onChange={Change}
/>
</div>)
});
}
});
columns.push({
title:'操作',
dataIndex:'action',
align:'center',
fixed:'right',
render:(text, record)=>(
<div className={lSql}>
{this.handleAction(text, record)}
</div>
)// 操作列，不同表格拥有不同操作，也是后台传递
});
const defaultColumns = columns;
this.setState({
columns,
defaultColumns,
});
}
}
// ⽤户操作后触发onChange⽅法：
onChange= checkedValues => checkedValues =>{
const showTitle =[];
const datas =[
{
title:'#',
dataIndex:'rock',
render:(text, record)=><span className={lTitle}>{text}</span>,
align:'center',
},// 在重写columns时，有些⼀些不可操作列需要重新⼿动存储，⽐如序号列，操作列等];
// defaultColunms是获取到的所有列
// columns是需要展⽰的列
// checkedValues为⽤户选中列
// showTitle为新的展⽰表头
this.state.defaultColumns.forEach(r =>{
checkedValues.forEach(rs =>{
if(r.title === rs){
datas.push(r);
showTitle.push(r.title);
}
});
});
datas.push({
title:'操作',
dataIndex:'action',
width:`${100/(showTitle.length +1)}%`,
align:'center',
render:(text, record)=>{
return this.handleAction(text, record);
},
});
this.setState({ columns: datas, thTitle: showTitle });
};
由于后期需求调整，这个功能就被去掉了，没有效果图，但是效果⼀百分！
列排序
⾸先利⽤filter在表头设置排序图标：
const cols = columns.map((col, index)=>({
...col,
filterDropdown: col.sortered,//排序图标占位，根据传⼊的值判断该列是否需要排序功能
filterIcon: filtered =><div className={styles.sorter}>
<Icon id={`${col.dataIndex}ascend`} type="caret-up" onClick={()=>this.sorter("ascend","descend",col)}/>
<Icon id={`${col.dataIndex}descend`} type="caret-down"  onClick={()=>this.sorter("descend","ascend",col)}/>
</div>,// ⾃定义筛选图标，就是两个箭头图标，绑定排序⽅法
}));
排序⽅法：
sorter=(sor,col)=>{//sor排序规则，col列属性
//排序图标样式变化
const icon=document.querySelectorAll("i");
if(icon.length>0){
icon.forEach(item=>lor="#848484")
};// 先将所有图标改为为排序样式
const ElementById(col.dataIndex+sor);
lor="#1890ff";//再改变被选中的图标样式
//
//这⾥进⾏数据请求，将值传给Table的onChange⽅法等操作
//
};
滚动条
antd的滚动条是我觉得最坑的⼀个功能，由于项⽬中需要展⽰⼤量表格，且每个表格列数不⼀，在复
⽤Table组件时动不动就会错位，以及在同时使⽤fixed属性固定列时，居然会有空⽩，两个功能居然不能完美兼容。所以我对表格滚动进⾏了重写，不需要使⽤antd的scroll属性或者其他属性，实现表格滚动条的⾃适应。这⾥利⽤了Table的components属性，对ant的默认样式进⾏覆盖。
// 分别对table、tbody、tr的样式进⾏重新设置。const BaseHeader=(props)=>{
const{...restProps}=props;
const tableStyle={
display:'table',
tableLayout:'fixed',
width:'100%',
};
return(
<thead {...restProps} style={tableStyle}/>
)
};
const BaseTable=(props)=>{
const{...restProps}=props;
const tableStyle={
height:tableHeight,
overflow:'auto',
display:'block',
width:'100%'
};
return(
<tbody {...restProps} style={tableStyle}/>
)
};
const BaseRow=(props)=>{
const{...restProps}=props;
const tableStyle={
display:'table',
// tableLayout:'fixed',
width:'100%',
height:lineHeight
};
return(
<tr {...restProps} style={tableStyle}/>
)
};
在components中调⽤：
//.js⽂件
thisponents ={
header:{
wrapper:BaseHeader
},
body:{
wrapper:BaseTable,
row:BaseRow,
},
};
//.less⽂件中
.ant-table-body{
overflow: auto;
}
// 附带滚动条样式优化
::-webkit-scrollbar {
width:6px;
height:6px;
}
::-webkit-scrollbar-track-piece {
background-color: #e8e8e8;
-webkit-border-radius:6px;
}
::-webkit-scrollbar-thumb:vertical {
height:5px;
background-color:rgba(0,0,0,0.5);
-webkit-border-radius:6px;
}
:
:-webkit-scrollbar-thumb:horizontal {
width:5px;
background-color:rgba(0,0,0,0.5);
-webkit-border-radius:6px;
}
到这，表格就可以抛弃scroll属性，实现⾃适应滚动条了。但是，如果你同时要求固定表格⾥的某些列，使⽤了fixed属性，你会发现，antd 为你⽣成了两个table（固定列与⾮固定列），滚动时不能两个表格同时滚动，这明显不符合我们的需求：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。