电商网站建设在哪里找设计师,门户网站 特点,深圳人才网站建设,免费logo设计官网一、前言 antd的table#xff0c;默认是点击左边的单选/复选按钮#xff0c;才能选中一行数据#xff1b;
现在想实现点击右边的部分#xff0c;也可以触发操作选中这行数据。
可以使用onRow实现#xff0c;样例如下。
二、代码
1.表格样式部分
//表格table样式部分{…一、前言 antd的table默认是点击左边的单选/复选按钮才能选中一行数据
现在想实现点击右边的部分也可以触发操作选中这行数据。
可以使用onRow实现样例如下。
二、代码
1.表格样式部分
//表格table样式部分{isRadio ?TabledataSource{data.list}onRow{(record) ({onClick: () {this.selectRow(record);},})}rowSelection{{type: radio,selectedRowKeys: selectedIdsInSearchTab,//onChange: this.onSelectChange,}} // 表格是否可复选加type是单选去掉是多选columns{this.getColumns()}rowKey{record record.id}pagination{false}loading{loading}sizemiddleborderedscroll{{ x: 1100 }}/ :TabledataSource{data.list}onRow{(record) ({onClick: () {this.selectRow(record);},})}rowSelection{{selectedRowKeys: selectedIdsInSearchTab,//onChange: this.onSelectChange,}} // 表格是否可复选加type是单选去掉是多选columns{this.getColumns()}rowKey{record record.id}pagination{false}loading{loading}sizemiddleborderedscroll{{ x: 1100 }}/}说明 (1)isRadio 是自己写的一个变量用来区分是单选表格还是多选表格
(2)onRow的this.selectRow(record)方法是核心用来实现点击一行数据即可选中其实是点击 单选/多选按钮右边的部分时触发这个方法
(3)//onChange: this.onSelectChange,这个方法是点击左边的单选/多选按钮时会触发
但是由于框架自身bug翻页多选数据的话id数组没有问题、内容数组会只保留当前页、无法保留前几页选中的内容所以在此注释了后果是点击左边的单选/多选按钮没有反应只能点击行右边部分进行选择/取消选择也许也能接受
(4)加上 type: radio表格就会展示为单选按钮去掉表格默认展示为多选按钮
(5)selectedRowKeys: selectedIdsInSearchTab这个是保存选中行id的一个数组必须加数组有内容后页面就会显示出哪行被选中的样式
2.onRow的this.selectRow(record)方法
selectRow (record) {const {dispatch,TrainPlanManage_SelectBscUserT: { selectedIdsInSearchTab,selectedRowsInSearchTab },isRadio} this.props;//如果是单选if(isRadio){//获取存放的keyconst selectedRowKeys [record.id];//获取存放的数据valueconst selectedRows [record];dispatch({type: TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab,selectedIds : selectedRowKeys,selectedRows: selectedRows,});}//否则是多选else{//获取存放的keyconst selectedRowKeys [...selectedIdsInSearchTab];//获取存放的数据valueconst selectedRows [...selectedRowsInSearchTab]; if (selectedRowKeys.indexOf(record.id) 0) {//当点击选中的数据取消选中selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);//取消选中也要删除数组中的valueselectedRows.forEach((element,index) {if(element.id record.id){//根据id获取到数组里当前数据的下标并删除。selectedRows.splice(index,1)}});} else {selectedRowKeys.push(record.id);//将选中的数据加入数组里selectedRows.push(record)}//this.setState({ selectedRowKeys,selectedRows }); dispatch({type: TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab,selectedIds : selectedRowKeys,selectedRows: selectedRows,});}}说明
(1)TrainPlanManage_SelectBscUserT: { selectedIdsInSearchTab,selectedRowsInSearchTab }的意思是从TrainPlanManage_SelectBscUserT.js里拿出2个变量来selectedIdsInSearchTab是保存被选中id的数组selectedRowsInSearchTab 是保存被选中整行数据的数组
(2)入参record就是当前点击的行数据单选时直接保存回那2个变量中即可 多选时先判断现有数组中是否存在当前点击行的id如果存在那就是取消选择的意思从数组移除内容 如果不存在那就是新增直接放入数组。
(3)selectedRows.splice(index,1)的意思是从数组中删除下标为index的数据。
(4)dispatch方法调用的是TrainPlanManage_SelectBscUserT.js里的方法把处理好的数组保存进去用如下
export default {namespace: TrainPlanManage_SelectBscUserT,state: {selectedIdsInSearchTab:[],selectedRowsInSearchTab:[],......---------------------------------------reducers: {updateSelectedIdsInSearchTab(state, action) {return {...state,selectedIdsInSearchTab: action.selectedIds || state.selectedIds,selectedRowsInSearchTab: action.selectedRows || state.selectedRows,};},} (5)如果变量在同一个js中也可以使用//this.setState({ selectedRowKeys,selectedRows }); 来保存。
//3.//onChange: this.onSelectChange方法
这个方法是点击左边的 单选/复选 按钮 触发的
单选没有问题
但是多选的上方提到了由于框架自身bug翻页多选数据的话id数组没有问题、内容数组会只保留当前页、无法保留前几页选中的内容所以不推荐使用注释了后果是点击左边的单选/多选按钮没有反应只能点击行右边部分进行选择/取消选择也许也能接受
代码如下 // 复选框选中后的方法onSelectChange (selectedIds, selectedRows) {const { dispatch } this.props;dispatch({type: TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab,selectedIds,selectedRows,});};说明 (1) 这个方法入参是选中行的id数组和选中行的数据数组再强调一次翻页多选的话选中行的数据数组只有当前页的有问题
(2)dispatch方法与上方相同就是把数组直接保存进去。
三、备注
1.发现table绑定的已选中的id数组selectedRowKeys如果列表有id的话把id装入数组页面就会显示哪些行被选中 但是如果数据列表没有叫id的字段那么把其它值装入绑定数组没有效果页面不知道选中的是哪行
可能是框架会有默认的id装入默认的id才行比如012但是数据列表没有id字段我们无法区分这条数据应该的id是什么从而无法实现点击一行选中当前数据的功能……
