vuejs |表格切页与表格默认状态

问题

最近在做一个新建与编辑群组的功能。

这期间碰到了一些问题，总结一下：

• 新建群组时，在当前页选中条目后，跳转下一页后数据会清空。
• 编辑群组时，表格的默认不会自动勾选已有的成员。
• 关闭右侧标签时如何做到与表格数据同步？

1.切页时数据清空问题

通过row-key标记行；通过reserve-selection开启保留选中。它们需要搭配使用：

<el-table ... :data="tableData" :row-key="getRowKeys">

<el-table-column type="selection" :reserve-selection="true"/>

data(){
  return{
    tableData:[],//当前页的表格数据
    selectedList:[],//已勾选的人员数据
    getRowKeys(row) {//记录每行的key值
      return row.id;
    },
  }
},

最后通过handleSelectionChange来保持数据同步：

<el-table ... @selection-change="handleSelectionChange">

handleSelectionChange(val){
  this.selectedList=val
},

2.渲染表格默认状态问题

data(){
  return{
    origin_ids:[],//默认人员id
    tableData:[],//当前页的表格数据
    selectedList:[],//已勾选的人员数据
    total:0,//表格数据的总条数
    pageSize:10,//一页所容纳的条数
    start:0,//0为关闭状态，1为最初的打勾状态，2表示结束
  }
},

在开始编辑时，首先要知道编辑的群组最开始有哪些成员，才能对表格进行默认状态的渲染：

async getOwnGroup(){
  //发送请求-获取当前群组的默认信息...
  this.origin_ids=res.data.staff.map(item=>item.id)//数组
},

获取当前页数据，通过切页或调用时触发：

async queryList(page){
  //发送请求-获取当前页的人员信息...
  this.tableData = Array.from(res.data.data);//当前页数据
  this.total=res.data.total
},

接着根据origin_ids在表格勾选成员。然而实际上只能勾选当前页的成员，即如果默认成员不在当前页出现，就无法勾选，导致默认数据缺失。

（解决问题1的基础上）我的想法是，先把每一页都翻一遍，把默认成员在表格中勾选上，再配合handleSelectionChange就能在勾选的同时把数据添加进this.selectedList：

async requestAllPages(){
  await this.queryList(1)//主要用于获取全部条目数与每页所容纳的条数
  let count=Math.ceil(this.total/this.pageSize)//计算有几页
  
  this.start=1 //进入默认勾选模式

  //不止一页时：
  if(count>1){
    for(let i=2;i<count+1;i++){
      await this.queryList(i)//从第二页开始勾选
    }
    await this.queryList(1)//最后回到第一页
  //只有一页时：
  }else{
    await this.queryList(1)
  }
    
  this.start=2//结束默认勾选模式
},

回到<el-table>，给它加上ref，之后使用自带的toggleRowSelection方法进行勾选：

<el-table ref="multipleTable">

async queryList(page){
  ////发送请求获取当前群组的默认信息
  //...
    
  //进入默认勾选模式时:
  if(this.start==1){
      this.tableData.map(item=>{
        //如果这一页有一条id能在origin_ids（默认成员id）中找到，勾选上这一条。
        if(this.origin_ids.findIndex(id=>id==item.id)!==-1){
          this.$refs.multipleTable.toggleRowSelection(item,true);
        }
      })
  }  
},

最后：

async created(){
  await this.getOwnGroup()//获取当前群组信息
  await this.requestAllPages()//获取每一页
},

3.关闭标签问题

右侧的标签也是根据this.selectedList遍历的：

<el-tag
  v-for="tag in selectedList"
  :key="tag.id"
  @close="closeTag(tag)"
  closable>
  {{tag.username}}
</el-tag>

（解决问题1的基础上）所以表格的item与标签的tag数据实际上是等同的，现在只需调用toggleRowSelection就能实现同步：

closeTag(tag){
  this.$refs.multipleTable.toggleRowSelection(tag,false);
},