VUE的CheckBox及翻页

 

VUE项目,加了checkbox后,发现翻页时候 是否勾选 只有第一页是有效的,后续翻页都跟第一页一样、不随着自己的数据改变;

百度查完,增加了1个属性应该就好了;

 

el-table    增加属性:

:row-key="(row)=>{return row.moId}"

 

加了下面的属性,则可以记住其他页手动勾选的记录,不加这个属性,则翻页后勾选标记会消失

el-table-column    增加属性:

:reserve-selection="true"

 

 

<el-table :header-cell-style="tableheadercolor" style="width: 100%;" :height="Height" :data="vehicleBulletinList.slice((currentPage-1)*pagesize,currentPage*pagesize)" current-row-key="guid" id="out-table"
highlight-current-row cell-class-name="text-center" header-cell-class-name="text-center" :row-style="tableRowstyle"
:row-key="(row)=>{return row.moId}"
>


<el-table-column width='120' prop="moDocNo" label="生产工单号"></el-table-column>

<el-table-column width='120' prop="completeDate" label="计划完工日"></el-table-column>
<el-table-column prop="itemCode" label="产品信息"></el-table-column>
<el-table-column prop="currentStartedQty" label="工序开工数量"></el-table-column>
<el-table-column prop="currentOperation" label="当前工序"></el-table-column>

<el-table-column prop="currentStartedScannTime" label="开工时间"></el-table-column>


<el-table-column prop="currentStartedScanner" label="开工人"></el-table-column>
<el-table-column prop="stayTime" label="停留时间"></el-table-column>
<el-table-column prop="memo" label="备注"></el-table-column>
<el-table-column prop="jinJi" label="紧急" :reserve-selection="true">
<template slot-scope="scope">
<el-checkbox :checked="scope.row.jinJi">
</el-checkbox>
<span>{{ scope.row.jinJi}}</span>
</template>
</el-table-column>
<el-table-column prop="teJi" label="特急" :reserve-selection="true">
<template slot-scope="scope">
<el-checkbox :checked="scope.row.teJi">
</el-checkbox>
<span>{{ scope.row.teJi }}</span>
</template>
</el-table-column>
</el-table>

 

 

 

参考网页:

https://blog.csdn.net/qq_23565535/article/details/100596497

https://www.cnblogs.com/littlelittleship/articles/13541052.html

 

上一篇:前端 vue element 组件 el-upload 上传文件


下一篇:Android之CheckBox实例实现