每天记录一个小知识3----elementUI多选，分页保留所有选中数据

父组件

<template>
  <div>
    <el-button type="primary" plain size="mini" @click="select" icon="el-icon-plus">选择</el-button>
    <el-table v-loading="loading" :data="selectData" border style="margin-top: 10px;">
      <el-table-column prop="username" label="名称" align="center" width="150px" />
      <el-table-column prop="mobile" label="手机号" align="center" width="150px" />
      <el-table-column prop="lastLoginDate" label="最后登录时间" align="center" width="190px" />
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete2(scope.row,scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Select ref="select" @select="getselect" :tableData='ids'></Select>
  </div>
</template>

<script>
  import Select from '@/components/Select';
  export default{
    components: {
      Select
    },
    data(){
      return{
        loading:false,
        ids:[],
        selectData:[],
      }
    },
    
    methods:{
      select(){
        this.$refs.select.getSelect();
      },
      getselect(e){
        if(e){
           this.ids=[...e];
          this.selectData=[...e]
        }
      
      },
      handleDelete2(row,index){
        this.ids.splice(index,1);
        this.selectData.splice(index,1)
      }
    }
  }
</script>

<style>
</style>

子组件

<template>
  <el-dialog :visible.sync="Visible" width='80%'>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px;">
      <el-form-item label="名称">
        <el-input v-model="queryParams.username" placeholder="请输入名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="昵称" align="center">
        <el-input v-model="queryParams.nickName" placeholder="请输入昵称" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系方式" align="center">
        <el-input v-model="queryParams.mobile" placeholder="请输入联系方式" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-icon-search" @click="onSubmit1">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-form>
      <el-table :data="List" v-loading="loading" @select="handleRowClick" @select-all="handleAllclick" :row-key="row => { return row.id }"
        ref="tableDataList" border>
        <el-table-column type="selection"  align="center" />
        <el-table-column property="username" label="名称" ></el-table-column>
        <el-table-column property="nickName" label="昵称" ></el-table-column>
        <el-table-column property="mobile" label="联系方式"></el-table-column>
      </el-table>
      <pagination small :page-size="10" v-show="total>0" :total="total" :page.sync="queryParams.pageNumber"
        :limit.sync="queryParams.pageSize" @pagination="getSelect" />
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm2">确 定</el-button>
      <el-button @click="cancel2">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { selectList} from '@/api/index.js';
  export default{
    props:{
      tableData:{
        type:Array,
        default:()=>[]
      }

    },
    data(){
      return{
        Visible:false,
        List:[],
        loading:true,
        total:0,
        ids:[],
        selectData:[],
        queryParams: {
          pageNumber: 1,
          pageSize: 10,
        },
      }
    },
    watch:{
       tableData:{
         handler(news,olds){
           this.selectData= news
         },
         immediate:true,
       },

    },
    methods:{
      //当用户手动勾选全选 Checkbox 时触发的事件
      handleAllclick(selection){
        let _this = this;
        let selectionIdList = [];
        let idList = [];
        if(selection.length > 0){
          // 判断是否再当前选中组中
          selection.forEach(m => {
           selectionIdList.push(m.id)
          })
          _this.ids.forEach(m => {
           idList.push(m.id)
          })
          selectionIdList.forEach((v,n)=>{
            if(idList.indexOf(v) < 0){
              _this.ids.push(selection[n]);
            }
          })
        }else{
          _this.List.forEach(v => {
            _this.ids.forEach((m,n) => {
              if(v.id == m.id){
                _this.ids.splice(n, 1)
              }
            })
          })
        }
      },
//当用户手动勾选数据行的 Checkbox 时触发的事件
      handleRowClick(selection, row) {
          // 点击行
          let _this = this;
          let selectionIdList = [];
          // 判断是否再当前选中组中
          selection.forEach(m => {
           selectionIdList.push(m.id)
          })
          let idList = [];
          _this.ids.forEach(m => {
           idList.push(m.id)
          })
          if (selectionIdList.indexOf(row.id) < 0) {
           _this.ids.forEach((v, i) => {
            if (v.id == row.id) {
             _this.ids.splice(i, 1)
            }
           })
          } else {
           if (idList.indexOf(row.id) < 0) {
            _this.ids.push(row)
           }
          }
         },

      onSubmit1() {
        this.getSelect();
      },
     
      getSelect() {
        this.Visible = true;
        this.ids = [...this.selectData];
        this.loading = false;
        selectList(this.queryParams).then((res) => {
          if (res.code == 200) {
            this.List = res.result.list;
            this.total = res.result.total;
            this.$nextTick(() => {
              res.result.list.forEach(item => {
                this.ids.forEach(row => {
                  if (item.id == row.id) {
                    this.$refs.tableDataList.toggleRowSelection(item);
                  }
                });
              })
            });
          }
        })
      },
      submitForm2(){
        this.Visible = false;
        this.$emit('select', this.ids)
      },
      cancel2() {
        this.Visible = false;
      },
      
    }
  }
</script>

<style>
</style>