el-table复选记忆分页回显

实在百度的基础上自己加了回显功能

原文地址：https://www.cnblogs.com/hcxy/p/9482762.html
附上代码：

    <template>
        <div class="table-demo">
           <el-form ref="formInline" :model="seachData" inline label-position="left" style="margin-top: 2vh">
        <el-form-item label="项目名称">
            <el-input type="text" v-model.trim="seachData.proName" clearable placeholder="请输入"></el-input>
        </el-form-item>



        <el-form-item>
            <el-button type="primary" @click="seach(seachData)">查询</el-button>
   
        </el-form-item>
    </el-form>
          <el-table
            ref="multipleTable"
            :data="rowData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="changeFun"
            @select="selectMemoryFn"
            @select-all="selectAll"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="名称" width="120">
              <template slot-scope="{ row }">{{ row.proName }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
          </el-table>
      
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
                    <el-button type="primary"  @click="submitProId()">确定
            </el-button>
        </div>
      </template>

<script>
import {

    getProInformationPage, //分页查询项目


} from '@/api/api';
    export default {
      data () {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 12, // 随便定义一个形成分页的数字
          rowData: [], 
          multipleSelection: [], // 选中的数据二维数组
        //   ids:[],
          ids: [] ,// 选中的数据id数组
                      seachData: {
                proName: "",

                size: 10,
                current: 1,


            },

            getIdArr:[153, 150,123,144],
            getIdArrInfo:[],

        }
      },
      methods: {
        changeFun (val) { // 保存已选数据id到数组，供后续操作（与分页记忆无关）
          this.$nextTick(() => {
            let ids = []
            this.multipleSelection.forEach(L => L.forEach(M => ids.push(M.id)))
            this.ids =ids
          })
        },
        selectAll (selection) { // 全选切换方法
        console.log(selection)
          if (selection.length) { // 全选
            this.multipleSelection[this.currentPage - 1] = selection
            selection.checked = true
            for(var i = 0 ; i<selection.length;i++) {
                if(this.getIdArr.indexOf(selection[i].id)!='-1') {

			         this.getIdArr.splice(this.getIdArr.indexOf(selection[i].id),1) 
                }

            }
          for(var i = 0 ; i<selection.length;i++) {
		      
		    this.getIdArr.push(selection[i].id)

            }

          } else { // 全不选
            this.multipleSelection[this.currentPage - 1] = []
            selection.checked = false
            // console.log(this.currentPage )
            console.log(this.rowData)

             for(var i = 0 ; i<this.rowData.length;i++) {
                if(this.getIdArr.indexOf(this.rowData[i].id)!='-1') {

                    this.getIdArr.splice(this.getIdArr.indexOf(this.rowData[i].id),1) 
                }

            }

          }
        },
        selectMemoryFn (val, row) { // 设置分页记忆二位数组方法
  
        if(row.checked==true) {
    
		row.checked=false
		        if(this.getIdArr.indexOf(row.id)!='-1') {
		
		   this.getIdArr.splice(this.getIdArr.indexOf(row.id),1) 
		}


        }else {

            
            row.checked=true
            console.log(this.getIdArr.indexOf(row.id))
            if(this.getIdArr.indexOf(row.id)!='-1') {

			   this.getIdArr.splice(this.getIdArr.indexOf(row.id),1) 
			}else {
			     this.getIdArr.push(row.id)
			}
			console.log(this.getIdArr)
	}
          // 注意：val 传过来默认为数组类型 ，row 为 Object（当前选择数据对象）
          
          let currentArr = this.multipleSelection[this.currentPage - 1] // 当前分页对应数组

          if (!currentArr) {
            this.multipleSelection[this.currentPage - 1] = val // 不存在这个二维数组，则创建这个二位数组
          } else { // 存在
            if (val.includes(row)) { // 选中
              this.multipleSelection[this.currentPage - 1] = val
            } else { // 取消
              delete currentArr[currentArr.indexOf(row)]
            }
          }
          console.log(this.multipleSelection,currentArr)
        },
        selectMemoriedDataFn () { // 分页记忆自动选中方法
 

          let currentArr = this.multipleSelection[this.currentPage - 1]  // 当前分页对应被选中数据
        console.log(currentArr)
          if (currentArr && currentArr.length) { // 存在则继续执行
            let tempRowsIDs = this.rowData.map(L => L.id) // 当前分页被选中数据的id集合
            currentArr.forEach((item, index) => { // 遍历当前分页被选中数据
              if (tempRowsIDs.includes(item.id)) { // id匹配上，则选中
                this.$refs.multipleTable.toggleRowSelection(this.rowData[tempRowsIDs.indexOf(item.id)])
             
              }
            })
          }
          console.log(this.multipleSelection)
        },
        seach() {
      this.currentPage = 1
          this.init()
        },
        handleCurrentChange (val) { // 分页切换，重新加载数据
          this.currentPage = val
          this.init()
        },
        async init () {  // 初始化获取数据
         var params = this.seachData
         this.seachData.current = this.currentPage
          let res = await getProInformationPage(params)
          this.rowData = res.data.records
          this.total = res.data.total
     
                                   setTimeout(()=>{
                                  
                             this.setSelectRow()
                        }, 200)
                         
         
        },
        submitProId() {
            alert("共选中"+this.getIdArr.length+"数据")
            // var submitID = []
            console.log(this.getIdArr)
            // console.log(this.rowData)
            // console.log(this.getIdArr)

            // submitID = [...this.getIdArr,...this.ids]
            // console.log(submitID)




     


        },
        //回显接口
           setSelectRow() {
                this.$refs.multipleTable.clearSelection();
                for(var i = 0; i < this.rowData.length; i++) {   
                    this.rowData[i]['checked'] = false                 
                    if (this.getIdArr.indexOf(this.rowData[i].id) >= 0) {
                        // 设置选中，记住table组件需要使用ref="table"
                    this.rowData[i]['checked'] = true        

                        this.$refs.multipleTable.toggleRowSelection(this.rowData[i], true);
                    }
                }
            } ,
      },
      watch: {
        rowData (oldVal, newVal) { // 监听数据变化，然后执行分页记忆自动选中回调
          this.$nextTick(() => {
            this.selectMemoriedDataFn()
          })
        }
      },
      created () {
        this.init()
      }
    }
    </script>
>