需求：ant design 的table组件中，点击表头的选择框可以实现全选的效果，但有时根据业务需求，需要在表格外面添加一个选择框，点击实现全选的效果，如图所示。
实现方法：
1、添加一个checkbox
2、 在table组件中添加 rowSelection 属性
定义该属性
// 选择行
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
3、实现全选方法
// 全选的方法
selectAll = () => {
// data 是这页面表格的所有数据
const { data } = this.props;
// selectedRows 为state中存放的选中的表格行
const {selectedRows} = this.state;
if(data.length === selectedRows.length){
this.handleRowSelectChange([],[]);
}else{
//把索引数组里的值由String转换成Number
const keys = Object.keys(data)
const index = [];
keys.forEach(item=>{
index.push(Number(item))
});
this.handleRowSelectChange(index,data)
}
};
// 全选函数
// 传入选中的行的序号ID 和 选中的行
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
// 在 state中 维护这个状态
this.setState({
selectedRowKeys: selectedRowKeys,
selectedRows: selectedRows,
});
};4、实现 CheckBox 的选中状态
//改变全选按钮的选中状态
const {data} = this.props;
const keys = Object.keys(data);
let isChecked = null
if(keys.length === selectedRowKeys.length){
isChecked=true
}else{
isChecked=false
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66415.html
