【el-table+tab切换存储数据】

效果如下：

20230612_155918

/*tab*/
<div :class="types==1?'active':''" @click="types=1">按部门</div>
<div :class="types==2?'active':''" @click="types=2">按账号</div>
<el-table
 v-show="types==1"
  :data="depDatas"
  :header-cell-style='headeCellStyleH'
  ref="depTables"
  v-loading='loading'
  style="width: 100%;"
  :max-height="maxHeight - 180"
  :row-key="(row) => { return row.id }"
  @select="hadleSelectDep"
  @select-all="hadleSelectDepAll"
>
<el-table-column
  type="selection"
  :reserve-selection="true"
  width="55">
</el-table-column>
  <el-table-column
    prop="name"
    label="部门名称"
    show-overflow-tooltip
    align="left"
    resizable
  >
    <template slot-scope="{ row }">
      <div>
        {{ row.deptName }}
      </div>
    </template>
  </el-table-column>
  <el-table-column
    prop="createTime"
    label="创建时间"
    show-overflow-tooltip
    align="left"
    width="200"
    resizable
  >
  </el-table-column>
</el-table>
<el-table
  v-show="type==2"
  :data="userData"
  ref="userTables"
  :header-cell-style='headeCellStyleH'
  v-loading='loading'
  style="width: 100%;"
  :max-height="maxHeight - 180"
  @select="hadleSelectUser"
  @select-all="hadleSelectUserAll"
  :row-key="(row) => { return row.id }"
>
<el-table-column
  type="selection"
  :reserve-selection="true"
  width="55">
</el-table-column>
  <el-table-column
    prop="name"
    label="用户"
    show-overflow-tooltip
    align="left"
    resizable
  >
    <template slot-scope="{ row }">
      <div>
        {{ row.realName }}
      </div>
    </template>
  </el-table-column>
  <el-table-column
    prop="createTime"
    label="创建时间"
    show-overflow-tooltip
    align="left"
    width="200"
    resizable
  >
  </el-table-column>
</el-table>
<div class="page" v-if="types==1">
  <Pagination
    :total="depTotal"
    :page.sync="depPage"
    :limit.sync="depLimit"
    @pagination="getDeptList"
    :layout="layout"
  ></Pagination>
  <div>共{{parseInt(depTotal/depLimit)<=0? 1 :parseInt(depTotal/depLimit)}}页 {{depTotal}}项记录</div>
        </div>
        <div class="page" v-if="types==2">
          <Pagination
            :total="userTotal"
            :page.sync="userPage"
            :limit.sync="userLimit"
            @pagination="getInfoList"
            :layout="layout"
          ></Pagination>
          <div>共{{parseInt(userTotal/userLimit)<=0? 1 :parseInt(userTotal/userLimit)}}页 {{userTotal}}项记录</div>
        </div>
        <div class="user-container">
          <div v-if="multipleSelections">
            <div class="user-item" :style="[randomRgb(),randomColor()]" v-for="(item, index) in multipleSelections" :key="index">
                <span v-if="item.deptName">
                  {{ item.deptName }}
                </span>
                <span v-if="item.realName">
                  {{ item.realName }}
                </span>
                <svg-icon icon-class="close"  @click="clearUserCheck(item)"/>
            </div>
          </div>
          <svg-icon icon-class="close" v-if="multipleSelections" @click="clearUserCheck('')"/>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <div class="finish" @click="finishUser">完成</div>
      </span>

hadleSelectDep(selection){
        this.depSelections = selection
        if(this.multipleSelections.length){
          this.multipleSelections.forEach((element,index) => {
            if(element.deptName){
              this.depSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
              if(JSON.stringify(this.depSelections).includes(JSON.stringify(element)) === false){//不存在-删除
                this.multipleSelections.splice(index,1)
              }
            }else{
              this.depSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
            }
          });
        }else{
          this.multipleSelections.push(...this.depSelections)
        }
      },
      hadleSelectDepAll(selection){
        this.depSelections = selection
        if(this.multipleSelections.length){
          this.multipleSelections.forEach((element,index) => {
            if(element.deptName){
              if(this.depSelections.length){
                this.depSelections.forEach(userItem => {
                  if(JSON.stringify(this.depData).includes(JSON.stringify(userItem)) === false){//不存在-添加
                    var multipleSelections = null
                    multipleSelections = this.userData.filter((item) => {
                      return item.realName
                    })
                    for (var i=0; i<this.multipleSelections.length; i++) {  
                      for (var j=0; j<multipleSelections.length; j++) {  
                        if (this.multipleSelections[i].id == multipleSelections[j].id) {  
                          this.multipleSelections.splice(i, 1);    
                        }  
                      } 
                    } 
                  }else{
                    if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(userItem)) === false){//不存在-添加
                      this.multipleSelections.push(userItem)
                    }
                    var multipleSelections = null
                    multipleSelections = this.multipleSelections.filter((item) => {
                      return item.userSelections
                    })
                    multipleSelections.forEach(item => {
                      if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === true){//不存在-删除
                        this.multipleSelections.splice(index,1)
                      }
                    })
                  }
                });
              }else{
                var multipleSelections = null
                multipleSelections = this.multipleSelections.filter((item) => {
                  return item.deptName
                })
                for (var i=0; i<this.multipleSelections.length; i++) {  
                  for (var j=0; j<multipleSelections.length; j++) {  
                    if (this.multipleSelections[i].id == multipleSelections[j].id) {  
                      this.multipleSelections.splice(i, 1);    
                    }  
                  } 
                } 
              }
            }else{
              this.depSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
            }
          });
        }else{
          if(this.depSelections.length){
            this.multipleSelections.push(...this.depSelections)
          }else{
            this.multipleSelections=[]
          }
        }
      },
       hadleSelectUser(selection){
        this.userSelections = selection
        if(this.multipleSelections.length){
          this.multipleSelections.forEach((element,index) => {
            if(element.realName){
              this.userSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
              if(JSON.stringify(this.userSelections).includes(JSON.stringify(element)) === false){//不存在-删除
                this.multipleSelections.splice(index,1)
              }
            }else{
              this.userSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
            }
          });
        }else{
          this.multipleSelections.push(...this.userSelections)
        }
      },
      hadleSelectUserAll(selection){
        this.userSelections = selection
        if(this.multipleSelections.length){
          this.multipleSelections.forEach((element,index) => {
            if(element.realName){
              if(this.userSelections.length){
                this.userSelections.forEach(userItem => {
                  if(JSON.stringify(this.userData).includes(JSON.stringify(userItem)) === false){//不存在-添加
                    var multipleSelections = null
                    multipleSelections = this.userData.filter((item) => {
                      return item.realName
                    })
                    for (var i=0; i<this.multipleSelections.length; i++) {  
                      for (var j=0; j<multipleSelections.length; j++) {  
                        if (this.multipleSelections[i].id == multipleSelections[j].id) {  
                          this.multipleSelections.splice(i, 1);    
                        }  
                      } 
                    } 
                  }else{
                    if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(userItem)) === false){//不存在-添加
                      this.multipleSelections.push(userItem)
                    }
                    var multipleSelections = null
                    multipleSelections = this.multipleSelections.filter((item) => {
                      return item.userSelections
                    })
                    multipleSelections.forEach(item => {
                      if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === true){//不存在-删除
                        this.multipleSelections.splice(index,1)
                      }
                    })
                  }
                });
              }else{
                var multipleSelections = null
                multipleSelections = this.multipleSelections.filter((item) => {
                  return item.realName
                })
                for (var i=0; i<this.multipleSelections.length; i++) {  
                  for (var j=0; j<multipleSelections.length; j++) {  
                    if (this.multipleSelections[i].id == multipleSelections[j].id) {  
                      this.multipleSelections.splice(i, 1);    
                    }  
                  } 
                } 
              }
            }else{
              this.userSelections.forEach(item => {
                if(JSON.stringify(this.multipleSelections).includes(JSON.stringify(item)) === false){//不存在-添加
                  this.multipleSelections.push(item)
                }
              })
            }
          });
        }else{
          if(this.userSelections.length){
            this.multipleSelections.push(...this.userSelections)
          }else{
            this.multipleSelections=[]
          }
        }
      },
      //删除选中的用户
      clearUserCheck(item){
        if(item){
          this.depSelections.forEach((element,index) => {
            if(element.id==item.id){
              
              this.$nextTick(()=>{ 
                this.$refs.depTables.toggleRowSelection(element, false);
              })
              this.depSelections.splice(index,1)
            }
            this.$refs.depTables.selection.forEach((items,i) => {
                if(items.id === item.id){
                  this.$refs.depTables.selection.splice(i,1)
                }
            });
          });
          this.userSelections.forEach((element,index) => {
            if(element.id==item.id){
              this.$nextTick(()=>{
                this.$refs.userTables.toggleRowSelection(element, false);
              })
              this.userSelections.splice(index,1)
            }
            this.$refs.userTables.selection.forEach((items,i) => {
                if(items.id === item.id){
                  this.$refs.userTables.selection.splice(i,1)
                }
            });
          });
          this.multipleSelections.forEach((element,index) => {
            if(element.id == item.id){
              // if(item.deptName){
              //   this.$refs.depTables.toggleRowSelection(element, false);
              // }else{
              //   this.$refs.userTable.toggleRowSelection(element, false);
              // }
              this.multipleSelections.splice(index,1)
            }
          })
        }else{
          this.multipleSelections = []
          this.$refs.depTables.clearSelection()
          this.$refs.userTables.clearSelection()
          this.depSelections = []
          this.userSelections = []
        }
      },