首页 > 其他分享> > vue+elementUI穿梭框

vue+elementUI穿梭框

2021-12-01 09:04:31 作者：互联网

近期项目中遇到穿梭框功能，将其过程做以总结：

效果图

在这里插入图片描述

代码

template

<template>
  <div class="transfer">
    <el-tabs v-model="activeName" @tab-click="tabChange">
      <el-tab-pane v-for="(item,index) in conditionList" :key="index+'only'" :label="item.condition" :name="item.condition">
        <div v-if="item.condition === '院区'">
          <el-row :gutter="20" class="condition-table">
            <!-- 左侧 -->
            <el-col :span="11" style="padding-left:0">
              <div class="no-add">
                <span>未添加</span>
                <el-pagination @size-change="changePageSize" :current-page.sync="staffLeft.current" @current-change="pageIndexChange" :total="staffLeft.staffLeftList.length" layout="prev,pager,next"></el-pagination>
              </div>
              <el-table ref="staffTable" height="350" border v-loading="listLoading" :row-key="getRowKeyLeft" :data="staffLeft.staffLeftList.slice((current-1)*pageSize,current*pageSize)" @selection-change="handleStaffChange" :header-cell-style="{background:'#f5f8ff'}">
                <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column>
                <el-table-column label="名称" align="center" width="150px" show-overflow-tooltip>
                  <template slot-scope="{row}">
                    <span>{{ row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="编码" align="center" show-overflow-tooltip>
                  <template slot-scope="{row}">
                    <span>{{ row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="{row}">
                    <el-switch v-model="row.status=='enable'?true:false"></el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <!-- 图标 -->
            <div class="icon-center">
              <p class="icon-right-if icon-return" @click="addStaff(item.condition)" v-if="staffLeft.staffLeftList.length>0">
                <i class="el-icon-arrow-left"></i>
              </p>
              <p class="icon-right-else icon-return" v-else>
                <i class="el-icon-arrow-left"></i>
              </p>
              <p class="icon-right-if" @click="removeStaff(item.condition)" v-if="selectedStaffList.length>0">
                <i class="el-icon-arrow-left"></i>
              </p>
              <p class="icon-right-else" v-else>
                <i class="el-icon-arrow-left"></i>
              </p>
            </div>
            <!-- 右侧 -->
            <el-col :span="11" style="padding-right:0">
              <div class="no-add">
                <span>已添加</span>
                <el-pagination @size-change="changeRightPageSize" @current-change="currentChange" :current-page.sync="pageRightNumber" small layout="prev, pager, next" :total="selectedStaffList.length"> </el-pagination>
              </div>
              <el-table ref="selectedStaffTable" height="350" border v-loading="listLoading" :row-key="getRowKeyRight" :data="selectedStaffList.slice((pageRightNumber-1)*pageRightSize,pageRightNumber*pageRightSize)" @selection-change="handleSelectedStaffChange" :header-cell-style="{background:'#f5f8ff'}">
                <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column>
                <el-table-column label="名称" align="center" width="150px" show-overflow-tooltip>
                  <template slot-scope="{row}">
                    <span>{{ row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="编码" align="center" show-overflow-tooltip>
                  <template slot-scope="{row}">
                    <span>{{ row.number}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="{row}">
                    <el-switch v-model="row.status=='enable'?true:false"></el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

data

data() {
    return {
      current: 1,
      pageSize: 10,
      pageRightNumber: 1,
      pageRightSize: 10,
      activeName: '院区',
      staffLeft: { //院区左边表格数据
      	//totalRow:0,
        staffLeftList: [  //项目中调用接口获取数据，此处是模拟数据
          { id: "1", name: "院区1", number: "9", status: "enable" },
          { id: "2", name: "院区2", number: "8", status: "enable" },
          { id: "3", name: "院区3", number: "7", status: "enable" },
          { id: "4", name: "院区4", number: "6", status: "enable" },
          { id: "5", name: "院区5", number: "9", status: "enable" },
          { id: "6", name: "院区6", number: "8", status: "enable" },
          { id: "7", name: "院区7", number: "7", status: "enable" },
          { id: "8", name: "院区8", number: "6", status: "enable" },
          { id: "9", name: "院区9", number: "9", status: "enable" },
          { id: "10", name: "院区10", number: "8", status: "enable" },
          { id: "11", name: "院区11", number: "7", status: "enable" }
        ]
      },
      conditionList: [{
        name: "条件",
        condition: "院区",
      }],
      selectedStaffList: [], //右边表格
      listLoading: false,
    };
  },

methods

// 行数据的Key
getRowKeyLeft(row) {
  return row.id;
},
getRowKeyRight(row) {
  return row.id;
},
tabChange() {
  this.current = 1;
  this.pageRightNumber = 1;
},
pageIndexChange(current) {
  this.current = current;
},
changePageSize(val) {
  this.pageSize = val;
  this.tabChange();
},
changeRightPageSize(val) {
  this.pageRightSize = val;
},
handleSizeChange(val) {
  this.pageSize = val;
},
handleCurrentChange(val) {
  this.current = val;
},
currentChange(val) {
  this.pageRightNumber = val;
},
// 将左边表格选择项存入staffLeftSaveData中(后面与右边的对比，右边已存在再不添加)
handleStaffChange(rows) {
  this.staffLeftSaveData = [];
  if (rows) {
    rows.forEach(row => {
      if (row) {
        this.staffLeftSaveData.push(row);
      }
    });
  }

},
// 左边表格选择项移到右边
addStaff(type) {
  let repeat = false;
  setTimeout(() => {
    this.$refs["staffTable"][0].clearSelection();
    this.$refs["selectedStaffTable"][0].clearSelection();
  }, 0);
  for (const item of this.selectedStaffList) {
    if (this.staffLeftSaveData[0] && item.id === this.staffLeftSaveData[0].id) {
      repeat = true;
      this.$message.error(`该${type}已添加`);
      return;
    }
  }
  if (!repeat) {
    this.staffLeftSaveData.forEach(item => {
      this.selectedStaffList.push(item);
    });
    for (let i = 0; i < this.staffLeft.staffLeftList.length; i++) {
      for (let j = 0; j < this.staffLeftSaveData.length; j++) {
        if (this.staffLeft.staffLeftList[i] && this.staffLeftSaveData[j] && this.staffLeft.staffLeftList[i].name === this.staffLeftSaveData[j].name) {
          this.staffLeft.staffLeftList.splice(i, 1);
        }
      }
    }
  }
  if (this.staffLeft.staffLeftList.length === 0 && this.current !== 1) {
    this.current--;
  }

},
// 右边表格选择项移到左边
removeStaff(type) {
  setTimeout(() => {
    this.$refs["staffTable"][0].clearSelection();
    this.$refs["selectedStaffTable"][0].clearSelection();
  }, 0);
  this.selectedStaffData.forEach(item => {
    this.staffLeft.staffLeftList.push(item);
  });
  for (let i = 0; i < this.selectedStaffList.length; i++) {
    for (let j = 0; j < this.selectedStaffData.length; j++) {
      if (this.selectedStaffList[i] && this.selectedStaffData[j] && this.selectedStaffList[i].id === this.selectedStaffData[j].id) {
        this.selectedStaffList.splice(i, 1);
      }
    }
  }
},
// 将右边表格选择项存入selectedStaffData中
handleSelectedStaffChange(rows) {
  this.selectedStaffData = [];
  if (rows) {
    rows.forEach(row => {
      if (row) {
        this.selectedStaffData.push(row);
      }
    });
  }
}

css

<style scoped lang="less">
.transfer {
  width: 1160px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 30px;
  margin: 50px;
  .condition-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
    }
    /deep/.el-table__body-wrapper::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #9093994d;
      border-radius: 6px;
    }
  }

  .el-icon-arrow-left {
    font-size: 21px !important;
    background: #d9d9d9;
    border-radius: 4px;
    color: #fff;
    padding: 2px;
  }
  /deep/ .el-popover__reference-wrapper {
    vertical-align: middle !important;
    padding-left: 4px;
  }
  .icon-right-if .el-icon-arrow-left {
    background: #409eff;
    color: #fff;
  }
  .icon-center {
    i {
      margin-top: 8px;
      &:hover {
        cursor: pointer;
      }
    }
    .icon-return {
      transform: rotate(180deg);
    }
  }
  .no-add {
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin-bottom: 10px;
    span {
      color: #333;
    }
  }
}
</style>

标签：vue,name,elementUI,number,穿梭,enable,id,院区,row
来源： https://blog.csdn.net/weixin_43363871/article/details/121638637