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">
         &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-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就可以解决:

官网Api参考

  <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踩过的坑,总结于此,以供诸君借鉴使用。

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐