Pagination 分页 一些坑
做嵌套表格,子表格要带分页,起初是用 @change="(pagination)=>handleTableChange(pagination)" 同样写在嵌套子表格中,并且,把子表格中写为
@change="(record.paginationrecord.monthPlanId)=>handleTableChange(record.pagination,record.monthPlanId)"
因为要用到当前页及条数,但是这种写法无论如何,触发该事件,返回的参数中都不含current 。
后来单独写了一个分页,
没有用table 嵌套的分页的事件,
@change="(record.pagination,record.monthPlanId)=>handleTableChange(record.pagination,record.monthPlanId)"
,把 嵌套子表格,及单独的分页,用div 包起来,让这个div 作为 大表格下的嵌套。之前渲染不出来是因为,(1)把slot="expandedRowRender" slot-scope="record"
写在table上,(2)后来div,与table 都有,同样也渲染不出来表格。(3)后来把table 上的去掉,就渲染出来了。
但触发该事件同样分页的current 字段没有。
后来把 第一个参数改为$event 第二个参依然是record.monthPlanId
在 触发该事件的时候就能返回current属性了。
无论是用单独的分页,还是写在嵌套子表格上。当触发change 事件的时候都返回了current 属性
<div slot="expandedRowRender" slot-scope="record" style="width:1050px;overflow:auto">
<a-table
:scroll="{ x:1180 }"
:columns="innerColumns"
:dataSource="record.dayplandata?record.dayplandata:[]"
:pagination="record.childpagedata"
style="font-size:10px;"
class="tablechild"
@change="childpagechange($event,record.monthlyPlanID)"
>
<span
slot="progress"
slot-scope="progress">
<a-progress :percent="progress" />
</span>
</a-table>
</div>
思考,api 上,明确@change 事件返回的参数,是个对象,这个对象包含分页的各个属性。之前是被父表格中的参数误导了。
2 关于 $event
参数的写法,只能保证原函数返回的第一个参数不变。如果原函数返回的参数不止一个,在
模板中第一个参数用 event`这个参数不用卸载methods的方法总,要写在template 模板中对应的html 中,methods中的方法中的参数,继续写该方法返回的第一个参数,及需要接受的第二个第三个参数等