正文

vuetransfer穿梭框(代码片段)

翰弟  翰弟  2022-10-21  761

关键词：

Element Transfer组件默认支持单个list的穿梭

现业务需要支持两个list，效果如下

实现思路：

　　1、有选中才可穿梭

　　2、已穿梭源数据减少、目标增加（双向）

　　边界条件：

　　　　存储旧List(（用于已穿梭后切换下拉框重置list等）

　　切下拉框时重置另一个list为旧list

　　　　左边下拉框选项同右边时清空右边下拉的选项

代码

<template>
  <div class="page custom-MS custom-MS-ED">
    <el-button class="right-top" type="primary" @click="updateBdCompany(\'qryForm\')">保存</el-button>
    <v-pageSection title="企业分配">
      <el-row>
        <el-form :inline="true" :model="qryInput" :rules="newRules" ref="qryForm" label-position="top">
          <el-col :span="8" :offset="2">
            <el-form-item label="源销售人员" prop="sourceAccount">
              <el-select v-model="qryInput.sourceAccount" filterable placeholder="请选择" clearable @change="handleSourceChange">
                <el-option v-for="item in bdList" :key="item.account" :label="item.name" :value="item.account">
                  <span style="float: left"> item.name </span>
                  <span style="float: right; color: #8492a6; font-size: 13px"> item.account </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item label="目标销售人员" prop="targetAccount">
              <el-select v-model="qryInput.targetAccount" filterable placeholder="请选择" clearable @change="handleTargetChange">
                <el-option v-for="item in otherBdList" :key="item.account" :label="item.name" :value="item.account">
                  <span style="float: left"> item.name </span>
                  <span style="float: right; color: #8492a6; font-size: 13px"> item.account </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-table border height="450"
            ref="multipleSourceTable"
            :data="sourceCL"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSourceSelectionChange">
　　　　　　　<!-- 使用Element表格的单选多选功能 -->
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">scope.row.shortName -- scope.row.poi</template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="2" :offset="1">
          <div style="height: 260px">
            <el-button type="primary" style="margin-top: 150px" :disabled="multipleSourceSelection.length == 0" @click="addToTarget">到右边<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-arrow-left" :disabled="multipleTargetSelection.length == 0" @click="addToSource">到左边</el-button>
          </div>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-table border height="450"
            ref="multipleTargetTable"
            :data="targetCL"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleTargetSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">scope.row.shortName-scope.row.poi</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </v-pageSection>
  </div>
</template>
<script>
　 //发ajax请求的服务
  import CMService from \'@/services/companyManagement-service\'
  export default 
    data() 
      return 
        qryInput: 
          sourceAccount: \'\'
        ,
        updateParams: ,
        companyIds: [],
        bdList: [],
        sourceCL: [],
        targetCL: [],
        oldSourceCL: [],
        oldTargetCL: [],
        multipleSourceSelection: [],
        multipleTargetSelection: [],
　　　　 //Element 数据校验
        newRules: 
          sourceAccount: 
            required: true,
            message: \'请选择源销售人员\'
          ,
          targetAccount: 
            required: true,
            message: \'请选择目标销售人员\'
          
        ,
      
    ,
    methods: 
      qry() 
        let vm = this
        CMService.qryUnderlingUser(this.qryInput, function(response) 
          vm.bdList = response.data.bdList
        )
      ,
      // 封装的方法 start
      // 是否穿梭过
      isTransfer(curList, oldList) 
        if(curList.length != oldList.length)
          return true
        else
          return curList.every(function(item)
            return oldList.includes(item)
          )
        
      ,
      // 删除已选
      deleteSelected(curList, multipleSelection) 
        let resultList = []
        curList.forEach(function(itemC, indexC)
          let resultFlag =  multipleSelection.every(function(itemM, indexM)
            return itemM.id != itemC.id
          ) 
          if(resultFlag) resultList.push(itemC)
        )
        return resultList
      ,
      // 获取id组成的数组
      getIdList(curList) 
        let idList = []
        curList.forEach(function(item, index)
          idList.push(item.id)
        )
        return idList
      ,
      // 封装的方法 end

      qrySourceCL(account) 
        if(!account)
          this.sourceCL = [] 
          return
        
        let vm = this
        if(this.isTransfer)
          this.targetCL = this.oldTargetCL
        
        CMService.getBdCompanyList(account: account, function(response) 
          debugger
          vm.sourceCL = response.data.companyList
          vm.oldSourceCL = vm._.clone(response.data.companyList)

        )
      ,
      qryTargetCL(account) 
        if(!account)
          this.targetCL = [] 
          return
        
        let vm = this
        if(this.isTransfer)
          this.sourceCL = this.oldSourceCL
        
        CMService.getBdCompanyList(account: account, function(response) 
          vm.targetCL = response.data.companyList
          vm.oldTargetCL = vm._.clone(response.data.companyList)
        )
      ,
      addToTarget() 
        if(!this.qryInput.targetAccount)
          this.$alert(\'请先选择目标销售人员\')
          return
        
        this.sourceCL = this.deleteSelected(this.sourceCL, this.multipleSourceSelection)
        this.targetCL = this.targetCL.concat(this.multipleSourceSelection)
      ,
      addToSource() 
        if(!this.qryInput.sourceAccount)
          this.$alert(\'请先选择目标销售人员\')
          return
        
        this.targetCL = this.deleteSelected(this.targetCL, this.multipleTargetSelection)
        this.sourceCL = this.sourceCL.concat(this.multipleTargetSelection)
      ,
      updateBdCompany(formName) 
        let vm = this
        this.$refs[formName].validate((valid) => 
          if (valid) 
            this.updateParams.companyIds = this.getIdList(this.targetCL)
            CMService.updateBdCompany(this.updateParams, function(response) 
              vm.$alert(\'修改成功\').then(() => 
                vm.dialogModifyFormVisible = false
                vm.qry()
              )
            )
           else 
            console.log(\'error submit!!\')
            return false
          
        )
      ,
      handleSourceChange(account) 
        this.qrySourceCL(account)
      ,
      handleTargetChange(account) 
        this.qryTargetCL(account)
        this.updateParams.account = account
      ,
      toggleSelection(rows) 
        if (rows) 
          rows.forEach(row => 
            this.$refs.multipleTable.toggleRowSelection(row);
          );
         else 
          this.$refs.multipleTable.clearSelection();
        
      ,
      handleSourceSelectionChange(val) 
        this.multipleSourceSelection = val;
      ,
      handleTargetSelectionChange(val) 
        this.multipleTargetSelection = val;
      
    ,
    mounted() 
      this.qry()
    ,
    computed: 
　　　 //目标销售人员由源销售人员过滤得到
      otherBdList: function()
        let vm = this
        return this.bdList.filter(function(item, index)
          return item.account !== vm.qryInput.sourceAccount
        )
      
    ,
  
</script>

ivew穿梭框transfer组件高亮显示操作值(代码片段)

项目场景：Transfer（穿梭框），双栏穿梭选择框，常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成，只需要最后保存组件目标值即可。问题描述&... 查看详情

element穿梭框transfer与进度条组件绑定(代码片段)

...作进度,我希望能将两者绑定起来;一、实现原理利用Element穿梭框提供的change事件来触发特定方法handleChange(),向方法内传入参数event来获取:发生改变查看详情

js原生双栏穿梭选择框(代码片段)

JS原生双栏穿梭选择框关于作者作者介绍🍓博客主页：作者主页🍓简介：JAVA领域优质创作者🥇、一名在校大三学生🎓、在校期间参加各种省赛、国赛，斩获一系列荣誉🏆。🍓关注我：关... 查看详情

数据量庞大的分页穿梭框实现(代码片段)

...好源码写个博客回来的晚，第二天才写好。。写个分页的穿梭框，从而解决数据量庞大的问题我之前写过一篇博客：关于Element组件的穿梭框的重构介绍并实现的方法但是第二个分页的demo没有，在上一家公司匆匆解决后，没有写... 查看详情

简单模拟穿梭框(代码片段)

穿梭框相信很多人接触过，在写后台管理系统的项目时有很大可能性会用到这个功能。其实这个组件在elementui里面有，但是因为兼容性ie的问题（万恶的ie啊），我现在必须手写一个类似的功能供项目使用乞丐样式上图原汁原味... 查看详情

穿梭框（filter过滤方法，sort排序v-model）(代码片段)

...t;<html><headlang="en"><metacharset="UTF-8"><title>穿梭框</title><linkrel="stylesheet"href="bootstrap.min.css"/><scriptsrc="vue.min.js"></script><style>#appwidth:80%;margin:0auto;display:flex;#app>ulwidth:50%;display:inline-block;list-style... 查看详情

vue实现拖拽穿梭框功能四种方式(代码片段)

一、使用原生js实现拖拽123<head><metacharset="UTF-8"/><title>Lazyload</title><style>.dragbackground-color:skyblue;position:absolute;line-height:100px;text-align:center;width:100px;height:100px;</style></head><body><!--left和top... 查看详情

vue实现拖拽穿梭框功能四种方式(代码片段)

layui穿梭框可以显示多列吗

答案是肯定的，Layui穿梭框可以显示多列，它可以支持多列的显示，可以根据需要自定义列的宽度，以及每列的显示内容。它还支持多种排序方式，可以根据用户的需求进行自定义排序，使用起来非常方便。此外，Layui穿梭框还... 查看详情

element-ui树形穿梭组件(代码片段)

Element-UI树形穿梭组件一、基本使用二、参数设置一、基本使用npminstallel-tree-transfer--save<template><div>//使用树形穿梭框组件<tree-transfer:title="title":from_data='fromData':to_data='toData':defaultProps="la... 查看详情

使用intent在活动之间穿梭(代码片段)

使用Intent在活动之间穿梭1.在com.example.activitytest中创建第二个活动SecondActivity:/***第二个活动*/publicclassSecondActivityextendsAppCompatActivity@OverrideprotectedvoidonCreate(BundlesavedInstanceState)super.onCreate(sa 查看详情

2git时光机穿梭(代码片段)

1、使用gitstatus命令可以随时掌握工作区的状态。　　运行gitstatus命令看看结果：1$gitstatus2#Onbranchmaster3#Changesnotstagedforcommit:4#(use"gitadd<file>..."toupdatewhatwillbecommitted)5#(use"gitcheckout--<file>..."todi 查看详情

element穿梭框点击后异步

对于您这个element穿梭框点击后异步问题解答，Element穿梭框点击后异步，一般有如下几种实现方式：1.使用Ajax异步请求：将穿梭框的点击事件进行绑定，触发后发起Ajax异步请求，请求后台接口获取数据，再做相应的处理，用于展... 查看详情

transfer穿梭框组件-基于layui

在线体验github:https://github.com/9499574/layui-transfer 查看详情

elementui组件中穿梭框内容显示不全解决方式

...mentui时，很多组件自带的样式并不能满足功能需求，比如穿梭框数据内容过长，如下：解决方式有两种：1.改变穿梭框的宽度，在工程中全文搜索.el-transfer-panel，找到定义这个类的地方，修改宽度。2.鼠标移入数据... 查看详情

git时光穿梭机管理修改(代码片段)

Git跟踪并管理的是修改，而非文件。什么是修改？比如你新增了一行，这就是一个修改，删除了一行，也是一个修改，更改了某些字符，也是一个修改，删了一些又加了一些，也是一个修改，甚至创建一个新文件，也算一个... 查看详情

vue+element树形穿梭框组件

<divclass="organizational"><el-dialog:title="dialogTitle":visible.sync="addDialogVisible"v-if="addDialogVisible":before-close="handleClose":close-on-click-modal="false"width="80%" 查看详情

git使用进阶——版本穿梭reset三种模式理解(代码片段)

在日常工作中使用git，除了正常场景外，会有各种异常场景，比如误提交了代码需要回退就是其中一个常见的场景，这就需要用到reset。要理解reset相关的内容，首先需要理解git工作区相关概念，可以参考... 查看详情