vue+iview 自定义实现穿梭框

已于 2022-02-09 11:03:02 修改
阅读量2.9k 收藏 3
点赞数 3
分类专栏： vue iview 文章标签： es6 javascript 前端
于 2020-07-17 19:07:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoupeng199/article/details/107415721
版权
vue 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
iview
2 篇文章 0 订阅
订阅专栏

vue+iview 自定义实现穿梭框

因业务需求iview穿梭框不满足业务需求自己写了个穿梭框。因本人是后端，请各位大佬看到了也可帮忙优化下。只实现了基本功能

表格及模态框代码

<Modal v-model="applyModel" closable title="发起申请" width="1260px" @on-cancel="cancelAppModel"	>
      <Form :model="applyModelForm" label-position="right" ref='applyModelForm' :rules="RuleValidateApply" :label-width="120">
        <FormItem v-if="buttonNumber == 3 || buttonNumber == 4 && applyModelForm.planId != null" label="查询学员"  >
          <Input type="text" clearable v-model="searchCardNumber" placeholder="学员身份证查询" style="width: 300px" @on-clear="clearInput" @on-change="changeInput" >
          </Input>
          <Button type="primary" @click="searchLeftData" style="margin-left: 10px;margin-top: 2px">查询</Button>
        </FormItem>
        <FormItem label="选择缴费学员"  v-if="applyModelForm.licenseType == null || applyModelForm.planId != null">
          <div class="transfreDiv" >
            <!--左边表格-->
            <Table size="small" :columns="columnsLeft" :data="dataLeft" width="600" height="350" style="margin-top: 10px;" @on-selection-change="changeSelectTableLeft">
            </Table>
            <div class="spacingOk" >
              <Button icon="el-icon-d-arrow-right" type="primary"  @click="addToRightTable" :disabled="addToRightList=='' "  >
                <Icon type="md-arrow-round-forward" />
                添加
              </Button>
            </div>
            <div class="spacing">
              <Button icon="el-icon-d-arrow-left" type="error" @click="addToLeftTable" :disabled="addToLeftList=='' ">
                <Icon type="md-arrow-round-back" />
                移除
              </Button>
            </div>
            <!--右边表格-->
            <Table ref="selection" size="small"  :columns="columnsRight" :data="dataRight" width="600" height="350" style="margin-top: 10px;
"@on-selection-change="changeSelectTableRight" >
              <template  slot-scope="{ row, index }" slot="countSlot">
                <Select  placeholder="****"   filterable v-model="row.count" style="width:100px"  @on-change="changeCount(row,index)" transfer >
                  <Option v-for="item in countS" :value="item.value" :key="item.value" >{{item.label}}</Option>
                </Select>
              </template>
              <template  slot-scope="{ row, index }" slot="actions">
                <Select transfer placeholder="选择费用"   filterable v-model="row.type" style="width:100px"   @on-change="changeCost(row,index)"  >
                  <Option v-for="item in moneyTypes" :value="item.value" :key="item.value" >{{item.label}}</Option>
                </Select>
              </template>
              <template  slot-scope="{ row, index }" slot="card">
                <Select transfer placeholder="****"   filterable v-model="row.isContainCard" style="width:100px"   @on-change="changeIsContainCard(row,index)"  >
                  <Option v-for="item in isContainCardS" :value="item.value" :key="item.value" >{{item.label}}</Option>
                </Select>
              </template>
              <template  slot-scope="{ row, index }" slot="RjType">
                <Select transfer placeholder="选择入**类型"   filterable v-model="row.rjType" style="width:100px"   @on-change="changeRjCost(row,index)"  >
                  <Option v-for="item in RjTypes" :value="item.value" :key="item.value" >{{item.label}}</Option>
                </Select>
              </template>
            </Table>
          </div>
        </FormItem>
        <div class="monny">
          <FormItem  label="备注" prop="remarks">
            <Input v-model="applyModelForm.remarks" type="textarea" placeholder="请填写备注信息" :maxlength="255" style="width: 300px" />
          </FormItem>
          <span style="margin-top: -60px;margin-left: 600px;font-size: 20px" >总金额：</span>
          <span style="margin-top: -60px;color: red;font-size: 20px">¥{{this.totalCost||0}}</span>
        </div>
      </Form>
      <div slot="footer" class="apply">
        <Button type="primary" @click="submitApplication" :loading="submitLoading" :disabled="dataRight == ''" >提交申请</Button>
        <Button >导出</Button>
        <Button >线下清单</Button>
      </div>
    </Modal>

data(){
        return {
          RjTypes:[
            {
              value:1,
              label:'......'
            },
            {
              value:2,
              label:'......'
            },
            {
              value:3,
              label:'.......'
            },
            {
              value:4,
              label:'.........'
            },
            {
              value:5,
              label:'...........'
            },
            {
              value:6,
              label:'..............'
            }
          ],
          countS:[
            {
              value: 1,
              label: '1'
            },
            {
              value: 2,
              label: '2'
            },
            {
              value: 3,
              label: '3'
            },
            {
              value: 4,
              label: '4'
            },
            {
              value: 5,
              label: '5'
            }
          ],
          moneyTypes:[
            {
              value: 4,
              label: '.........................'
            },
            {
              value: 6,
              label: '........................'
            },
            {
              value: 8,
              label: '......'
            }
          ],
          //....
          isContainCardS:[
            {
              value: 1,
              label: '包含'
            },
            {
              value: 2,
              label: '不包含'
            }
          ],
  
          //驾照类型下拉选
          // licenseTypes: [
          //   {
          //     value: 1,
          //     label: 'C1'
          //   },
          //   {
          //     value: 2,
          //     label: 'C2'
          //   },
          //   {
          //     value: 3,
          //     label: 'B2'
          //   }
          // ],
          applyModel:false,
          //放款模态框验证
          RuleValidateMakeLoans:{
            // credentialUrl: [
            //   {required: true, message: '放款凭证不能为空', trigger: 'change'},
            // ],
            accountId:[
              { required: true, message: '银行账户必选', trigger: 'change' ,type:'number'},
            ]
          },
          //发起申请验证
          RuleValidateApply:{
            planId:[
              { required: true, message: '考试计划不能为空', trigger: 'change' ,type:'number'},
            ],
            licenseType:[
              {required: true, message: '驾照类型不能为空', trigger: 'change',type:'number'},
            ],
            remarks:[
              {required: true, max: 255, message: '备注不能为空',type:'string'},
            ]
          },
          RuleValidateApplyNoPass:{
            content:[
              {required: true, max: 255, message: '备注不能为空',type:'string'}
            ]
          },
          RuleValidateApplyPass:{
            financialUserId:[
               { required: true, message: '审核人员必选', trigger: 'change' ,type:'number'},
            ],
            content:[
              {required: true, max: 255, message: '备注不能为空',type:'string'}
              ]
          },
          searchCardNumber:'',
          //发起申请时表单提交数据
          applyModelForm:{
            planId:null,
            licenseType:null,
            buttonNumber:null,
            cardNumber:'',
            count:null,
            remarks:'',
          },
          buttonNumber:0,
          columnsLeft:[
            {
              type: 'selection',
              key: 'index',
              width: 40,
              align: 'center'
            },
            {
              ellipsis:'true',
              tooltip:true,
              title: '姓名',
              key: 'name',
              width: 80,
              align: 'center'
            }
            ,{
              ellipsis:'true',
              tooltip:true,
              title: '身份证',
              width: 116,
              key: 'cardNumber',
              align: 'center'
            },{
              title: '次数',
              width: 65,
              key: 'count',
              align: 'center'
            },{
              title: '驾照',
              width: 80,
              key:'licenseType',
              align: 'center',
              render: (h, params) => {
                let rt = '';
                let value = params.row.licenseType;
                if (value == 1) {
                  rt = 'C1';
                } else if (value == 2) {
                  rt = 'C2';
                } else if (value == 3) {
                  rt = 'B2';
                }
                return h('span', rt);
              },
            }
            ,{
              ellipsis:'true',
              tooltip:true,
              title: '金额',
              width: 80,
              key: 'cost',
              align: 'center'
            },{
              ellipsis:'true',
              tooltip:true,
              title: '备注',
              width: 120,
              key: 'reason',
              align: 'center'
            }
          ],
          columnsRight:[
            {
              type: 'selection',
              key: 'index',
              width: 40,
              align: 'center'
            },
            {
              ellipsis:'true',
              tooltip:true,
              title: '姓名',
              key: 'name',
              width: 80,
              align: 'center'
            }
            ,{
              ellipsis:'true',
              tooltip:true,
              title: '身份证',
              width: 116,
              key: 'cardNumber',
              align: 'center'
            },{
              title: '次数',
              width: 125,
              slot:'countSlot',
              align: 'center'
            },{
              title: '驾照',
              width: 80,
              key:'licenseType',
              align: 'center',
              render: (h, params) => {
                let rt = '';
                let value = params.row.licenseType;
                if (value == 1) {
                  rt = 'C1';
                } else if (value == 2) {
                  rt = 'C2';
                } else if (value == 3) {
                  rt = 'B2';
                }
                return h('span', rt);
              },
            },{
              title: '类型',
              width: 125,
              slot: 'actions',
              align: 'center'
            },{
              title: '制卡费',
              width: 125,
              slot: 'card',
              align: 'center'
            },
            {
              title: '入籍类型',
              width: 125,
              slot: 'RjType',
              align: 'center'
            },
            {
              title: '金额',
              width: 100,
              key: 'cost',
              align: 'center'
            },
          ],
          dataLeft:[],
          dataRight:[],
          //添加左边勾选数据到右边集合中
          addToRightList:[],
          //左边点击勾选框时存入的数据
          resultLeftList:[],
          //右边点击勾选框时存入的index
          resultRightList:[],
          //添加右边数据到左边
          addToLeftList:[],
          //无限滚动时每次滚动加载数据条数
          length:5,
          selectStudentId:0,
          uploadData:{
            buttonNumber:0
          },
          searchDataLeft:[],
          searchAfterDataLeft:[],
        }
      },

打开模态框时操作

//点击发起申请
 clickApply(){
          this.$refs['applyModelForm'].resetFields();
          this.applyModelForm.planId=null
          this.applyModelForm.licenseType=null
          this.applyModelForm.cardNumber=''
          this.dataLeft=[]
          // this.deleteDataLeftList=[]
          this.resultLeftList=[]
          //清空右边表格
          this.dataRight=[]
          this.totalCost = null
          let leftArr =[
              {
                type: 'selection',
                key: 'index',
                width: 40,
                align: 'center'
              },
              {
                ellipsis:'true',
                tooltip:true,
                title: '姓名',
                key: 'name',
                width: 80,
                align: 'center'
              }
              ,{
                ellipsis:'true',
                tooltip:true,
                title: '身份证',
                width: 116,
                key: 'cardNumber',
                align: 'center'
              },{
                title: '次数',
                width: 65,
                key: 'count',
                align: 'center'
              },{
                title: '驾照',
                width: 80,
                key:'licenseType',
                render: (h, params) => {
                  let rt = '';
                  let value = params.row.licenseType;
                  if (value == 1) {
                    rt = 'C1';
                  } else if (value == 2) {
                    rt = 'C2';
                  } else if (value == 3) {
                    rt = 'B2';
                  }
                  return h('span', rt);
                },
                align: 'center'
              }
              ,{
                ellipsis:'true',
                tooltip:true,
                title: '金额',
                width: 80,
                key: 'cost',
                align: 'center'
              },{
              ellipsis:'true',
              tooltip:true,
              title: '备注',
              width: 120,
              key: 'reason',
              align: 'center'
              }
            ]
          let rightArr=[
            {
              type: 'selection',
              key: 'index',
              width: 40,
              align: 'center'
            },
            {
              ellipsis:'true',
              tooltip:true,
              title: '姓名',
              key: 'name',
              width: 80,
              align: 'center'
            }
            ,{
              ellipsis:'true',
              tooltip:true,
              title: '身份证',
              width: 116,
              key: 'cardNumber',
              align: 'center'
            },{
              title: '次数',
              width: 125,
              slot:'countSlot',
              align: 'center'
            },{
              title: '驾照',
              width: 80,
              key:'licenseType',
              align: 'center',
              render: (h, params) => {
                let rt = '';
                let value = params.row.licenseType;
                if (value == 1) {
                  rt = 'C1';
                } else if (value == 2) {
                  rt = 'C2';
                } else if (value == 3) {
                  rt = 'B2';
                }
                return h('span', rt);
              },
            },{
              title: '制卡费',
              width: 120,
              slot: 'card',
              align: 'center'
            },{
              title: '类型',
              width: 120,
              slot: 'actions',
              align: 'center'
            },{
              title: '入籍类型',
              width: 120,
              slot: 'RjType',
              align: 'center'
            },
            {
              title: '金额',
              width: 100,
              key: 'cost',
              align: 'center'
            },
          ]
          this.applyModel =true
          //根据按钮选择查询考试计划
          if(this.buttonNumber == 3 || this.buttonNumber == 4){
            getCostExamFiledList({buttonNumber:this.buttonNumber}).then(res => {
              this.planS = res
            })
          }
          this.columnsLeft = leftArr
          this.columnsRight =rightArr
          //如果按钮不是点击的代培费列表则不显示驾照类型和下拉选
          if(this.buttonNumber == 2 || this.buttonNumber == 3 || this.buttonNumber == 4 || this.buttonNumber == 7){
            this.columnsLeft.splice(4,1)
            this.columnsRight.splice(4,1)
            this.columnsRight.splice(4,1)
            this.columnsRight.splice(4,1)
            this.columnsRight.splice(4,1)
          }else if(this.buttonNumber == 1){
            this.columnsLeft.splice(3,1)
            this.columnsRight.splice(3,1)
            this.columnsRight.splice(4,1)
            this.columnsRight.splice(4,1)
          } else{
            this.columnsLeft.splice(3,1)
            this.columnsLeft.splice(4,1)
            this.columnsRight.splice(3,1)
            this.columnsRight.splice(6,1)
          }
        },

关闭模态框时操作

cancelAppModel(){
          this.applyModelForm.planId=null
          this.applyModelForm.licenseType=null
          this.applyModelForm.cardNumber=''
          this.searchCardNumber=''
          this.dataLeft=[]
          this.resultLeftList=[]
          this.addToRightList=[]
          this.dataRight=[]
          this.resultRightList=[]
          this.addToLeftList=[]
          this.$refs['applyModelForm'].resetFields();
},

点击查询

//点击搜索时
        searchLeftData(){
          this.searchDataLeft=[]
          if(this.searchCardNumber==''){
            return this.$Message.error("请先输入学员身份证号")
          }
          this.dataLeft.forEach(item=>{
            //如果循环出来的某个对象的身份证号和输入的相同
            if(item.cardNumber==this.searchCardNumber){
             this.searchDataLeft.push(item)
            }
          })
          this.dataLeft=this.searchDataLeft
        },```

点击添加时处理

```javascript
//点击添加按钮
addToRightTable(){
  this.addToRightList.forEach((item,index)=>{
    this.dataRight.unshift(item)
  })
  this.dataLeft=this.resultLeftList
  //添加到右侧集合后计算总金额
  let int=0
  this.dataRight.forEach((item,index)=>{
    int += item.cost
  })
  this.totalCost=int
  //清空获取到的下标集合
  this.resultLeftList=[]
  //清空左侧集合中选中的需要添加到右侧集合的数据
  this.addToRightList=[]
},

左边表格出现改变时代码

//左侧表格多选框出现变化时处理
changeSelectTableLeft(selection){
  this.addToRightList=selection
  let a=this.addToRightList;
  let b=this.dataLeft
  let arr1 = [...b].filter(x => [...a].every(y => y.studentId !== x.studentId));//es6语法查询交集
  this.resultLeftList=arr1
},

将选中数据添加到左边表格移除按钮

 //添加到左边表格
addToLeftTable(){
 //添加数据到左侧集合中
 this.addToLeftList.forEach((item,index)=>{
   this.dataLeft.unshift(item)
 })
 this.dataRight=this.resultRightList
 //添加到右侧集合后计算总金额
 let int=0
 this.dataRight.forEach((item,index)=>{
   int += item.cost
 })
 this.totalCost=int
 //清空获取到的取出差集的集合
 this.resultRightList=[]
 //清空左侧集合中选中的需要添加到右侧集合的数据
 this.addToLeftList=[]
},

右边表格的多选框发生改变时操作

changeSelectTableRight(selection){
  this.addToLeftList=selection
  let a=this.addToLeftList;
  let b=this.dataRight
  let arr1 = [...b].filter(x => [...a].every(y => y.studentId !== x.studentId));
  this.resultRightList=arr1
},

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完成后效果，代码删除较多只保留了基本的穿梭框功能。

zoupeng199
关注
专栏目录
vue +iview（table）+element-ui 自己写的穿梭框
Quiet_123的博客
11-21 2637
一。布局 &lt;template&gt; &lt;div class="settingparC"&gt; &lt;div class="settingLeft"&gt; &lt;Table ref="selection" @on-select="checkAll" height="390" border :columns=&
vue+iview 实现可编辑表格的示例代码
10-17
### Vue + iView 实现可编辑表格 #### 技术栈介绍 - **Vue**: 是一套用于构建用户界面的渐进式JavaScript框架，专注于数据驱动和组件化的单页应用。 - **iView**: 是基于Vue.js开发的高质量UI组件库，用于开发复杂...
基于iview封装的tree组件、checkbox组件的穿梭框组件
k0933的博客
11-27 553
【代码】基于iview封装的tree组件、checkbox组件的穿梭框组件。
vue3+elementPlus实现树形穿梭框
最新发布
weixin_45326293的博客
08-09 658
vue3+elementPlus实现树形穿梭框
基于iview-封装定制化的穿梭框组件
a5252145的博客
05-28 1606
基于iview-封装定制化的穿梭框组件 PM那边需求如下： ** 效果图如下：** 代码如下： <template> <!-- 穿梭组件 --> <div class="transferTpl"> <div class="left"> <div class="title"> <span>{{ leftTitle }}</span>
带你走进iView的穿梭框
湮顾千古的博客
06-03 1983
是的
Vue-异步树+自定义穿梭框的实现
qq_40007317的博客
12-14 1375
1、效果图 2、需求 首先接口获取到已添加人员列表，然后通过异步树+穿梭框进行人员的增加和删除。使用树结构展示组织信息，点击父节点展开按钮获取该组织下的所属组织，点击树节点传递获取该组织的所属人员，将人员展示在待添加列表，人员可以左移右移，并且左移时会进行回显（只回显属于该组织下的人员），最后点击保存就将右侧已添加列表进行保存。 3、源码 <template> <div> <el-button ...
vue仿iview穿梭框组件
wuww18stu的博客
12-26 2171
vue仿iview穿梭框组件 穿梭框中左侧为源数据，右侧为目标数据，其中左侧包含右侧全部数据，右侧可增加或减少，也可单选或者多选，也可选择数据然后上下移动展示顺序。 之前参考了iview穿梭框，但是其现有的功能不能满足需求，所以自己重新写了一个穿梭框，在原有的基础上功能上新增了做了一些修改和调整，还有很多不足之处，仅供参考 功能： 1. 左侧数据穿梭到右侧，左侧数据不减少，右侧数据增加 2. 右侧...
vue+iview+canvas 画框并改变大小
08-05
iview 3.0后台框架 内有iview系列插件与ueditor组件 有登录页面，账户与密码随意输入 登录后可直接操作 切换题目与答案画相应的框并拖动拉伸达到你所要的区域，还可以实时修改标题 运行环境 先运行npm install ...
inputAuto.vue 基于vue+iview的搜索下拉选择组件
04-02
iview中的select和AutoComplete不能满足我的需求，故自己写。
Vue+iView自适应后台模板.rar
11-12
Vue+iView自适应后台模板是一款基于Vue.js框架和iView UI组件库的高效、美观的后台管理系统模版。它专为构建支持PC端和移动端的Web应用设计，提供了丰富的功能和优秀的用户体验。以下是对这套模板及其相关技术栈的...
树形穿梭框
10-08
多种树形穿梭框集合 满足你对于所有树形穿梭框的需求 vue方式启动即可
vue+iview/elementUi实现城市多选
12-29
城市多选组件 最近收到了一个需求，管理系统需要上线一个活动，但是活动是根据地区上线的，最小范围到市，于是有了下面这个组件 页面展示如图： ...Select class=tm-mil-selsect style='width:200px' v-model='...
vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
weixin_39277183的博客
09-02 3071
vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
基于element-ui 使用树形穿梭框组件
锋声的博客
09-21 1943
先 npm 下载插件 npm install el-tree-transfer --save 或 npm i el-tree-transfer -S <template> <div> // 你的代码 ... // 使用树形穿梭框组件 <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @ad
vue 实现树状穿梭框
qq_43806488的博客
07-27 2847
vue实现树状穿梭框。
自定义穿梭框
放风喽的博客
04-27 2930
一、前言 穿梭框普遍都只显示一个字段，想显示多个字段，需要自己用表格搭建，我就是这么干的。 二、element ui vue2代码 <template> <div class="rongqi"> <div class="transtable"> <div> <div style="display: flex;"> <el-input v-model="leftinput" siz
vue 自定义el-table穿梭框功能
lemon今天学习了吗？的博客
06-05 2573
一、需求描述：前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能，弹框的左边是全部数据展示，点击表格行数据可以选中自动增加到右边的已选框，并且可以手动删除、重置选中数据。点击确定后到展示到主页面，被选中的数据打开弹框不能再次选择。
穿梭框iview
helloworlddm的博客
01-12 5577
穿梭框 双栏穿梭选择框，常用于将多个项目从一边移动到另一边。 说明 Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。 :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。 :render-format：每行数据显示的格式函...
vue实现点击按钮 弹出提示框
06-10
可以使用 Vue.js 自带的 `v-if` 指令和条件渲染来实现这个功能。首先，在你的模板中定义一个按钮和一个提示框，例如： ```html <template> <div> <button @click="showAlert = true">点击我弹出提示框</button> <div v-if="showAlert"> 这是一个提示框 <button @click="showAlert = false">关闭提示框</button> </div> </div> </template> ``` 在这个例子中，我们使用 `v-if` 来控制提示框的显示和隐藏，`@click` 监听按钮的点击事件。当点击按钮时，`showAlert` 变量会被设置为 `true`，从而显示提示框；当点击提示框内的关闭按钮时，`showAlert` 变量会被设置为 `false`，从而关闭提示框。 在你的 Vue 组件中，你只需要定义一个 `data` 属性来控制提示框的显示和隐藏： ```javascript <script> export default { data() { return { showAlert: false } } } </script> ``` 这样就能够实现一个简单的点击按钮弹出提示框的功能了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值