Vue+iView table分页勾选记忆功能

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){this.tableList.forEach((item) => {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();
}

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">&nbsp;已选中的服务号&nbsp;&nbsp;</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-elevatorshow-sizershow-totalclass="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：

<Pageref="pages":total="totalElements"
Page/>

    this.$nextTick(function(){this.$refs['pages'].currentPage = 1;})

b，使用tabs组件，切换页面，当页面无数据时，页面分页无法点击。
tab

page

添加属性： transfer=true就可以解决：

官网Api参考

  <Page:total="totalElements"size="small"show-elevatorshow-sizershow-totalclass="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踩过的坑，总结于此，以供诸君借鉴使用。

Vue+iView table分页勾选记忆功能相关推荐

Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
layui table行点击tr_layui的table单击行勾选checkbox功能方法
如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table t ...
ectouch购物车添加勾选结算功能
购物车勾选结算功能开发使用的是ectouch企业版,带有购物车功能. 当前功能:在商品详情页面,点击添加购物车后,会进入购物车中.在购物车页面,点击'立即购买'会将购物车中的全部商品都结算生成订单. ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
效果展示点击全选被全部勾选,再点击则取消勾选(下方还有取消按钮,实现同样功能). 也可以实现点击的书籍被勾选,再次点击则取消勾选在功能实现过程中主要是对v-show.v-if.v-else等的灵活 ...
vue页面翻页勾选的记忆功能
实现思路: <template><div><div class="customer-container"><el-row><e ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...

Vue+iView table分页勾选记忆功能

Vue+iView table分页勾选记忆功能相关推荐

最新文章

热门文章