手写穿梭框，

原创已于 2023-01-29 17:15:03 修改 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-01-29 17:13:05 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于Vue的穿梭框组件实现方法，该组件允许用户从左侧列表选择人员或部门并移动到右侧已选列表中。文章详细展示了组件的HTML结构、JavaScript逻辑及样式设置，并提供了关键交互功能如搜索过滤、选项高亮等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="transform-contain">
    <div class="transform-left">
      <div class="transform-left-header">
        <div class="header-title">
          <div>可选人员/部门</div>
          <div>({{ minDataLeft.length }} / {{ tableLeft.length }})</div>
        </div>
        <el-input placeholder="请输入姓名" v-model="name" clearable></el-input>
        <div class="tabs-main">
          <div v-for="(item,i) in tabsArr" :key="i" class="tabs" :class="activeName===i?'isActive':''" @click="changeTabs(i)">{{ item }}</div>
        </div>
        <el-table
          :data="filterData"
          style="width: 100%"
          height="167"
          @row-click="rowClick"
          :row-style="rowStyle">
          <el-table-column
            prop="realName"
            label="人员"
            align="center">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="transform-btn">
      <div class="btn" :class="minDataLeft.length?'color-btn':''" @click="toRight">
        <i class="el-icon-arrow-right" style="color:#C0C4CC"></i>
      </div>
      <div class="btn">
        <i class="el-icon-arrow-left" style="color:#C0C4CC"></i>
      </div>
    </div>
    <div class="transform-right">
      <div class="transform-right-header">
        <div class="header-title">
          <div>可选人员/部门</div>
          <div>(0 / 40)</div>
        </div>
        <el-input placeholder="请输入姓名" ></el-input>
        <div class="tabs-main">
          <div v-for="(item,i) in tabsArr" :key="i" class="tabs" :class="tabs===i?'isActive':''" @click="changeTab(i)">{{ item }}</div>
        </div>
        <el-table
          :data="tableRight"
          style="width: 100%"
          height="167">
          <el-table-column
            prop="realName"
            label="人员"
            align="center">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchDeparts, fetchUsers, fetchResourceTemplates } from '@/api/config';
export default {
  data() {
    return {
      activeName: 0,
      tabsArr: ['人员', '部门'],
      tableLeft: [],
      tabs: 0,
      tableRight: [],
      minDataLeft: [],
      name: ''
    };
  },
  created() {
    this.fetchUsers();
  },
  computed: {
    filterData() {
      if (this.name === '') {
        return this.tableLeft;
      } else {
        return this.tableLeft.filter(i => i.realName.indexOf(this.name) !== -1 || i.deptName.indexOf(this.name) !== -1);
      }
    }
  },
  methods: {
    changeTabs(i) {
      this.activeName = i;
    },
    changeTab(i) {
      this.tabs = i;
    },
    rowStyle({row}) {
      if (this.minDataLeft.includes(row)) {
        return {
          background: '#f5f1fe',
          color: '#7c4eef'
        };
      }
    },
    rowClick(a) {
      if (!this.minDataLeft.includes(a)) {
        this.minDataLeft.push(a);
      } else {
        this.minDataLeft.map((item, i) => {
          if (item.id === a.id) {
            this.minDataLeft.splice(i, 1);
          }
        });
      }
    },
    toRight() {
      this.minDataLeft.map((item, i) => {
        this.tableRight.push(item);
      });
      this.tableLeft = this.filterArray(this.tableLeft, this.minDataLeft);
      this.minDataLeft = [];
    },
    filterArray(A, B) {
      let newArr = A.filter((itemA) => {
        return B.every((itemB) => {
          return itemA.id !== itemB.id;
        });
      });
      return newArr;
    },
    fetchUsers() {
      fetchUsers().then((res) => {
        this.tableLeft = res.data.data || [];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
 /deep/.el-input{
  .el-input__suffix{
    top: -4px;
  }
  .el-input__inner{
    height: 26px;
    border-radius: 13px;
  }
}
/deep/.el-table{
  .el-table__header-wrapper{
    display: none !important;
  }
}
/deep/ .el-table__body{
          border-collapse: separate;
          border-spacing: 0px 4px;
          .el-table__row{
            >td{
              height: 24px !important;
              padding: 0;
              border: none;
              line-height: 24px;
              cursor: pointer;
              &:nth-child(2){
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                // color: #919399;
                line-height: 17px;
              }
            }

          }

        }
        /deep/ .el-table::before {
          height: 0px;
        }
.transform-contain{
  margin: 50px 0 0 30px;
  display: flex;
  .transform-left{
    box-sizing: border-box;
    width: 280px;
    height: 280px;
    border-radius: 8px;
    border: 1px solid #DDDFE6;
    padding: 10px 0;
    .transform-left-header{
      padding: 0 17px 0 13px;
      .header-title{
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #606266;
        line-height: 20px;
        margin-bottom: 8px;
      }
      .tabs-main{
        display: flex;
        justify-content: space-between;
        .tabs{
          width: 50%;
          text-align: center;
          border-bottom: 2px solid #e4e7ed;
          cursor: pointer;
          height: 36px;
          line-height: 36px;
        }
        .isActive{
          border-bottom: 2px solid #7c4eef;
        }
      }
    }
  }
  .transform-btn{
    width: 32px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .btn{
      width: 24px;
      height: 24px;
      background: #ECEEF5;
      border-radius: 2px;
      padding: 0;
      margin-left: 4px !important;
      margin-bottom: 4px;
      line-height: 24px;
      text-align: center;
    }
    .color-btn{
      background-color: #7c4eef;
    }
  }
  .transform-right{
    box-sizing: border-box;
    width: 280px;
    height: 280px;
    border-radius: 8px;
    border: 1px solid #DDDFE6;
    padding: 10px 0;
    .transform-right-header{
      padding: 0 17px 0 13px;
      .header-title{
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #606266;
        line-height: 20px;
        margin-bottom: 8px;
      }
      .tabs-main{
        display: flex;
        justify-content: space-between;
        .tabs{
          width: 50%;
          text-align: center;
          border-bottom: 2px solid #e4e7ed;
          cursor: pointer;
          height: 36px;
          line-height: 36px;
        }
        .isActive{
          border-bottom: 2px solid #7c4eef;
        }
      }
    }
  }
}
</style>>

此代码只实现左穿梭去右边，如果想完整的实现可以仿照我左去右完成右去左