vue+element中表格穿梭框（到左边到右边）

一、样式

二、父

 <!-- 调试增加 -->
 <shuttleFrame
      @routersPerson="routersPerson"
      :rightPerson="rightPerson"
      :formType="formType"
      :personId="personId"
    ></shuttleFrame>
    //rightPerson:编辑的右边人员
    //routersPerson:方法

三、子组件

<template>
  <div class="general">
    <div class="topLeft">
      <el-card class="box-card">
        <span class="changeWords">可选用户</span>
        <el-row>
          <el-form ref="searchform" :model="searchForm">
            <el-col :span="9">
              <el-form-item prop="name">
                <el-input
                  :placeholder="'请输入人员姓名'"
                  clearable
                  v-model="searchForm.name"
                  style="width: 95%"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item prop="projectUnitId">
                <el-select
                  v-model="searchForm.projectUnitId"
                  placeholder="请选择单位"
                  style="width: 95%"
                  @change="handleUnits"
                  clearable
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchlist"
                class="marginL"
                >查询
              </el-button>
            </el-col>
            <el-col :span="9">
              <el-form-item prop="projectTeamId">
                <el-select
                  v-model="searchForm.projectTeamId"
                  placeholder="请选择队伍"
                  style="width: 95%"
                  @change="handleRanks"
                  clearable
                >
                  <el-option
                    v-for="item in ranksList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item prop="projectGroupId">
                <el-select
                  v-model="searchForm.projectGroupId"
                  clearable
                  placeholder="请选择班组"
                  style="width: 95%"
                >
                  <el-option
                    v-for="item in teamList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button icon="el-icon-refresh-left" @click="resetform"
                >重置</el-button
              >
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-table
            ref="leftTableData"
            :data="leftTableData"
            style="width: 100%"
            max-height="250"
            @selection-change="changeCheckBoxValueLeft"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="attendGroup"
              label="考勤组"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.attendGroup ? scope.row.attendGroup.name : "--"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="联系电话"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="teamName" label="队伍" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{
                  scope.row.projectTeamName ? scope.row.projectTeamName : "--"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="projectGroupName"
              label="班组"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.projectGroupName ? scope.row.projectGroupName : "--"
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="topCenter">
      <el-button type="primary" :disabled="add" @click="rightAdd"
        >到右边<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
      <el-button type="primary" :disabled="del" @click="leftDelete"
        ><i class="el-icon-arrow-left el-icon--left">到左边</i></el-button
      >
    </div>
    <div class="topRight">
      <el-card class="box-card">
        <span class="changeWords">已选用户</span>
        <el-row>
          <el-table
            ref="rightTableData"
            :data="rightTableData"
            style="width: 100%"
            max-height="373"
            @selection-change="changeCheckBoxValueRight"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="mobile"
              label="电话"
              fixed
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script type="text/javascript">
import { staffAttendGroupStaffRosterList } from "@/api/staffManage";
import {
  projectUnitAll,
  projectTeamAll,
  projectGroupAll,
} from "@/api/newProject";

export default {
  data() {
    return {
      searchForm: {
        name: "",
        projectTeamId: "",
        projectGroupId: "",
        projectUnitId: "",
      },
      add: true,
      del: true,
      leftTableData: [],
      rightTableData: [],
      // transfer: [], //数据转移
      ranksList: [], //队伍
      teamList: [], //班组
      unitList: [], //单位
      selectedUserListLeft: [], //我是点击左边选中的人员
      selectedUserListRight: [], //我是点击右边选中的人员
    };
  },
  props: {
    //编辑传过来的人员
    rightPerson: {
      type: Array,
    },
    //判断是新增还是编辑
    formType: {
      type: Number,
      default: 0,
    },
    //考勤组id
    personId: {
      type: Number,
    },
  },
  created() {
    this.queryRoster();
    this.getoption();
  },
  computed: {},
  watch: {
    rightPerson: function (val) {
      this.rightTableData = val.concat([]);
      if (this.rightTableData.length && this.formType == 1) {
        this.queryRoster();
      }
    },
    rightTableData: function (val) {
      console.log("我是传递过去的值", val);
      // if (val.length) {
      this.$emit("routersPerson", val);
      // }
    },
    selectedUserListLeft: function (val) {
      if (val.length) {
        this.add = false;
      } else {
        this.add = true;
      }
    },
    selectedUserListRight: function (val) {
      if (val.length) {
        this.del = false;
      } else {
        this.del = true;
      }
    },
  },
  methods: {
    //我是增加的数据
    rightAdd() {
      let leftTableData = JSON.parse(JSON.stringify(this.leftTableData));
      leftTableData.forEach((item, index) => {
        this.selectedUserListLeft.forEach((item1) => {
          if (item1.id == item.id) {
            this.rightTableData = this.rightTableData
              .concat(item)
              .sort((a, b) => {
                return a.id - b.id;
              });
            delete leftTableData[index];
          }
        });
      });
      leftTableData = leftTableData.filter((val) => {
        return val;
      });
      this.leftTableData = leftTableData;
      this.selectedUserListLeft = [];
    },
    //我是删除的数据
    leftDelete() {
      let rightTableData = JSON.parse(JSON.stringify(this.rightTableData));
      rightTableData.forEach((item, index) => {
        this.selectedUserListRight.forEach((item1) => {
          console.log("item`1", item1);
          if (item1.id == item.id) {
            this.leftTableData = this.leftTableData
              .concat(item)
              .sort((a, b) => {
                return a.id - b.id;
              });
            delete rightTableData[index];
          }
        });
      });
      rightTableData = rightTableData.filter((val) => {
        return val;
      });
      this.rightTableData = rightTableData;
      this.selectedUserListRight = [];
      console.log(11111111111, rightTableData);
    },
    //获取单位
    async getoption() {
      const data = await projectUnitAll();
      this.unitList = data.data;
    },
    //获取队伍
    async handleUnits(id) {
      this.searchForm.projectTeamId = "";
      this.searchForm.projectGroupId = "";
      const data = await projectTeamAll({ projectUnitId: id });
      this.ranksList = data.data;
    },
    //获取班组
    async handleRanks(id) {
      this.searchForm.projectGroupId = "";
      const data = await projectGroupAll({ projectTeamId: id });
      this.teamList = data.data;
    },
    //查询
    searchlist() {
      (this.page = 1), this.queryRoster(true);
    },
    //重置
    resetform() {
      this.$refs["searchform"].resetFields();
      this.queryRoster(true);
    },
    //查询花名册人员
    async queryRoster(val) {
      let params = {};
      if (this.searchForm.name) {
        params.name = this.searchForm.name;
      }
      if (this.searchForm.projectTeamId) {
        params.projectTeamId = this.searchForm.projectTeamId;
      }
      if (this.searchForm.projectGroupId) {
        params.projectGroupId = this.searchForm.projectGroupId;
      }
      if (this.personId) {
        params.id = this.personId;
      }

      let data = await staffAttendGroupStaffRosterList(params);
      let dataList = JSON.parse(JSON.stringify(data.data));
      console.log("我是右边的值", val, this.rightTableData);
      if (val) {
        if (this.rightTableData.length && dataList.length) {
          dataList.forEach((item, index) => {
            this.rightTableData.forEach((item1) => {
              if (item1.id == item.id) {
                delete dataList[index];
              }
            });
          });
          dataList = dataList.filter((val) => {
            return val;
          });
        }
      }
      console.log("data", data.data, dataList);
      this.leftTableData = dataList;
    },
    //左边数据
    changeCheckBoxValueLeft(val) {
      console.log("我是左边选中的数据", val);
      this.selectedUserListLeft = val;
    },
    //右边
    changeCheckBoxValueRight(val) {
      console.log("我是右边选中的数据", val);
      this.selectedUserListRight = val;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .topCenter {
    .el-button + .el-button {
      margin-left: 0px;
      margin-top: 10px;
    }
  }
}
.changeWords {
  display: inline-block;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
}
.general {
  display: flex;
  align-items: center;
}
.topLeft {
  width: 50%;
  // background: rgb(240, 239, 239);
}
.topCenter {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
}
.topRight {
  width: 35%;
  // height: 410px;
  // background: rgb(240, 239, 239);
}
.box-card {
  height: 433px;
}
</style>