Vue+iView table分页勾选记忆功能
iViewtable组件checkbox跨页勾选记忆，及分页page相关使用采坑总结。
iView table分页勾选记忆功能
一，需求。
a，需求分析：
第一页勾选后，再点分页，勾选其它页数据，可以记住所有勾选的数据，然后可以回显所选数据到页面上，并且跳转页面仍可显示。
b，现有功能：
仅限在当前页面可以单选，多选，全选，也可以一一取消，全部取消。
c，存在问题：
第一页勾选后，点击分页选择任意数据勾选后，跨页后所勾选数据就会丢失，只会保存当前页的数据。
二，解决方案：
a，长久暂存数据
当跨页时，让数据push进新数组，若跳转页面，缓存后取缓存或者直接传参进入跳转页。
b，跨页回显所存数据。
需要解决选中后，点击分页，刷新接口数据后，数据依然可以回显到页面上。
c，单个勾选取消，回显数据响应减少。
d，取消全选勾选，回显数据去掉全选当页数据，切换分页，操作同样适用。
三，代码实现：
1.难点：
勾选状态的监听（如何知道是否被勾选）。
取消勾选对应回显的实时响应。
切换分页时所选数据回显在勾选状态。
2.具体代码（关于表格）：
a,长久暂存所选数据。
this.selectListObj为当前页所选中的数据。每次切换分页时会置空。
<Table
:columns="columns"
:data="tableList"
@on-selection-change="getSelectItems">
</Table>
因为table的@on-selection-change方法被封装在公共组件common.vue中：
getSelectItems(select) {
if (select && select.length > 0) {
this.selectListObj = select;
this.selectListIds = select.map(function (item) {
return item.id;
});
} else {
this.selectListIds = [];
this.selectListObj = null;
}
},
这样通过mixins注入每个页面就可以获取到 this.selectListObj 即每页所选中的数据，取消，全选，单选功能都可用。
import Common from "_c/common.vue";
export default {
mixins: [Common],
components: {},
data() {
return {
ServiceCodes: [],
ServiceCodeStr: "",
}
}
}
那么如何长久暂存数据呢？，就必须在每次勾选数据变化时，实时响应勾选数据暂存。
data中声明数组：
ServiceCodes: []
实现暂存数据，当每次数据选中后，即 this.selectListObj变动时将数据存入数据。
watch监听勾选变化：
watch: {
selectListObj: function () {
this.getServiceCode();
},
},
getServiceCode(){
let isNofor = "" || null || undefined;
if (this.selectListObj && this.selectListObj != isNofor) {
this.selectListObj.forEach((item) => {
for (let index in this.$refs.table.objData) {
if (item.appId == this.$refs.table.objData[index].appId) {
this.$refs.table.objData[index]._isChecked = true;//回显选中
if(this.ServiceCodes.indexOf(this.$refs.table.objData[index].serviceCode)==-1){
this.ServiceCodes.push(this.$refs.table.objData[index].serviceCode);//长久暂存所选数据
}
if(this.ServiceAppIds.indexOf(this.$refs.table.objData[index].appId)==-1){
this.ServiceAppIds.push(this.$refs.table.objData[index].appId);//长久暂存所选数据
}
}
}
});
this.ServiceCodeStr= this.ServiceCodes.toString();
}
//单页显示
// let isNofor = "" || null || undefined;
// let arr=[];
// if (this.selectListObj && this.selectListObj != isNofor) {
// this.selectListObj.forEach((item) => {
// if(item.serviceCode){
// arr.push(item.serviceCode);
// }
// });
// this.ServiceCodes=arr
// this.ServiceCodeStr= this.ServiceCodes.toString();
// }else{
// this.ServiceCodeStr=""
// }
localStorage.setItem("ServiceCodeStr", this.ServiceCodeStr);
},
b,跨页回显数据
回显数据方法：
通过控制：_isChecked为true显示，直接设置没啥反应。
this.$refs.table.objData[index]._isChecked = true
使用$ref控制table来获取数据。
<Table
ref="table"
:columns="columns"
:data="tableList"
@on-selection-change="getSelectItems">
</Table>
选中回显方法：
checked(){
this.ServiceCodes.forEach((item) => {
for (let index in this.$refs.table.objData) {
if (item == this.$refs.table.objData[index].serviceCode) {
this.$refs.table.objData[index]._isChecked = true;
}
}
})
},
页面初始化加载数据接口时调用该接口：
this.$nextTick(function(){
this.checked();
})
c，取消勾选时，去掉相对应的展示数据：
使用table的单选取消方法
@on-select-cancel=“selectCancel”
<Table
ref="table"
:columns="columns"
:data="tableList"
@on-selection-change="getSelectItems"
@on-select-cancel="selectCancel"
>
</Table>
单选取消：
selectCancel(selection,row){
this.ServiceCodes.splice(this.ServiceCodes.indexOf(row.serviceCode), 1);
this.ServiceAppIds.splice(this.ServiceAppIds.indexOf(row.appId), 1);
this.ServiceCodeStr= this.ServiceCodes.toString();
},
d,全选可以通过this.selectListObj，全选取消使用table的单选取消方法
@on-select-all-cancel=“selectAllCancel”
<Table
ref="table"
:columns="columns"
:data="tableList"
@on-selection-change="getSelectItems"
@on-select-cancel="selectCancel"
@on-select-all-cancel="selectAllCancel"
>
</Table>
全选取消：
selectAllCancel(selection){
if(selection&&selection.length===0){
this.tableList.forEach((item) => {
this.selectListIds = [];
this.selectListObj = null;
if(this.ServiceCodes.indexOf(item.serviceCode)!==-1){
this.ServiceCodes.splice(this.ServiceCodes.indexOf(item.serviceCode),1);
}
if(this.ServiceAppIds.indexOf(item.appId)!==-1){
this.ServiceAppIds.splice(this.ServiceAppIds.indexOf(item.appId),1);
}
})
}
this.ServiceCodeStr= this.ServiceCodes.toString();
this.getServiceCode();
}
e,选中数据回显到页面右边：
<Row :gutter="24">
<Col span="18">
//表格数据
</Col>
<Col span="6">
<div class="border-style button_padding">
<legend style="font-size: 14px;font-weight:800">
已选中的服务号
</legend>
<Input type="textarea"
disabled
style="margin-top: 15px;"
:autosize="{ minRows:45 , maxRows: 1000000000 }"
v-model="this.ServiceCodeStr"/>
</div>
</Col>
</Row>
f,数据传入跳转页
this.$router.push({
path: "service_configuration",
query: {
appId: this.ServiceAppIds,
serviceCode: this.ServiceCodeStr,
},
});
3,关于分页问题：
- 有时查数据页码置为1相应不及时；
- 无数据时分页规格无法点击切换；
<Page
:total="totalElements"
size="small"
show-elevator
show-sizer
show-total
class="pagenation"
:page-size="30"
:page-size-opts="[10, 20, 30, 40, 50]"
@on-page-size-change="onPageSizeChange"
@on-change="onPageChange"
/>
实现分页
页面初始化时为0.
totalElements: 0,
接口成功赋值
this.totalElements = res.data.totalElements;
common.vue中对应分页方法：
methods: {
onPageChange(page) {
this.queryParam.pageNumber = page;
this.getTabelList();
},
onPageSizeChange(size) {
this.queryParam.pageSize = size;
this.getTabelList();
},
}
a,页码初始化页码可置为1查询，若切换分页后，就会响应不及时。
可用$ref获取page：
<Page
ref="pages"
:total="totalElements"
Page/>
this.$nextTick(function(){
this.$refs['pages'].currentPage = 1;
})
b，使用tabs组件，切换页面，当页面无数据时，页面分页无法点击。
tab
page
添加属性： transfer=true就可以解决：
<Page
:total="totalElements"
size="small"
show-elevator
show-sizer
show-total
class="pagenation"
transfer=true
:page-size="30"
:page-size-opts="[10, 20, 30, 40, 50]"
@on-page-size-change="onPageSizeChange"
@on-change="onPageChange"
/>
无数据点击分页的效果图：
无数据table提示文字替换：:no-data-text
<Table
:columns="columns"
:data="tableList"
:row-class-name="rowClassName"
@on-selection-change="getSelectItems"
size="small"
:no-data-text="`<div style='color:red;font-size:13px;margin-left:-78%'>请点击查询按钮查询数据~<div>`"
>
</Table>
ok，以上皆为使用iView table踩过的坑，总结于此，以供诸君借鉴使用。
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)