element 弹出层 表格分页回显

工作需要开发一个弹出层嵌套表格，同时数据和外面弹出层的数据想保持同步的增删

又要满足分页的回显

ui是这样的：

ui界面我就不贴代码了，用的就是element的ui组件

下面说一下主要的回显功能的代码

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-				change="handlePerson" :row-key="getRowKeys"> 
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column prop="id" label="id">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120">
      </el-table-column>
</el-table>

其中分页的时候记住上一页选中项用到的是element的方法

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-				change="handlePerson" :row-key="getRowKeys"> 
//row-key 设置一个方法
//这个方法把之前
methods:{
  getRowKeys(row){
      return row.id
  },
}

<el-table-column type="selection" width="55" :reserve-selection="true">
//:reserve-selection="true" 设置为 true

这样基本实现了分页回显功 但是在拉点击添加的的时候表格数据会刷新 外面已经确认的 在里面表格也是需要回显的

我是这样解决的：

getPersonList(){
    // 请求表格列表数据
    this.$api.addMinList({
        pageNumber: this.personNumber,
        pageSize: this.personSize
    }).then(res => {
        if (res.result.list.length > 0) {
            // 总数据
            this.totalperson = res.total
            // 总页数
            this.personCount = res.totalPages
            this.tableData = res.result.list
        }
        //tableData 是请求的表格数据
        //selectable 是我外面选中的数据 这里要进行一次转化 
        //把外面你选中的数据id 循环取出
        let hasSelectList = []
        if (selectable.length > 0) {
            selectable.forEach((item) => {
                hasSelectList.push(item.id);
            })
        }
        //然后把外面的取出的数据赋值到新的数组里，和表格的数据进行对比，表格中对应的id的选项让他默认选中状态
        this.$nextTick(() => { //等待异步请求结束之后重新渲染表格
            this.tableData.forEach(row => {
                if (hasSelectList.indexOf(row.id) >= 0) {
                    this.$refs.multipleTable.toggleRowSelection(row, true);//默认选中状态
                }
            })
        })
    })
}

这样基本实现了弹出层之后分页回显 以及外面数据和里面数据同步回显

其中很多逻辑我都省略了

因为我这里是三个选择，我复用的一个弹出层组件 所以要判断每次弹出层的对应的审核批次

每次弹出的时候记得清楚一下上一个弹窗留下来的id

this.$refs.multipleTable.clearSelection()

清除所有选中的状态