vue Transfer 穿梭框
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>
vue Transfer 穿梭框的更多相关文章
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- vue实现穿梭框效果
vue实现穿梭框效果 一.总结 一句话总结: 用两个数组分别记录左右框框里面的值,用两个数组绑定checkbox,用来记录选中的checkbox值,根据选中的checkbox的值实现删除增加即可 1. ...
- Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- 修改vue element Transfer 穿梭框里内容区的宽度
<template> <el-transfer v-model="value1" :data="data"></el-transf ...
- Transfer 穿梭框
基础用法 Transfer 的数据通过 data 属性传入.数据需要是一个对象数组,每个对象有以下属性:key 为数据的唯一性标识,label为显示文本,disabled 表示该项数据是否禁止转移.目 ...
- 如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索
1.汉字: 直接添加对应的 filterable 2.拼音: 穿梭框和选择器的实现方式有所不同 选择器: <1>下载pinyin-match: npm i --save ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
- 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路
最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...
- VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框
工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树 ...
随机推荐
- (转)你应该知道的RPC原理
背景:对于项目中的RPC框架,仅仅停留在使用层面,对于其底层的实现原理不是很清楚.这样的后果是很危险的,对于面试官来说,跟不知道这个东西一样. 转载自:https://www.cnblogs.com/ ...
- PHP中防止SQL注入
防止SQL注入,我们需要注意以下几个要点: 1.永远不要信任用户的输入.对用户的输入进行校验,可以通过正则表达式,或限制长度:对单引号和 双"-"进行转换等. 2.永远不要使用动态 ...
- python简单购物车改进版
# -*- coding: utf-8 -*- """ ┏┓ ┏┓ ┏┛┻━━━┛┻┓ ┃ ☃ ┃ ┃ ┳┛ ┗┳ ┃ ┃ ┻ ┃ ┗━┓ ┏━┛ ┃ ┗━━━┓ ┃ 神 ...
- Can not issue data manipulation statements with executeQuery()错误解决
转: Can not issue data manipulation statements with executeQuery()错误解决 2012年03月27日 15:47:52 katalya 阅 ...
- 改xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- charles使用:iOS11的手机用charles抓包https
参考:https://www.jianshu.com/p/235bc6c3ca77 因为ios11经常抓不了包,以前一直没管,今天实在是不行,,,,搞了一下.OK了 步骤: 1.下载并安装charle ...
- linux优化之系统参数调优篇
linux优化之系统参数调优篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.用户限制配置文件(首先需要编辑/etc/security/limits.conf文件) 大家可以 ...
- Centos 7最小化Mongodb部署操作
基本组件 mongodb-org mongodb-org-server mongodb-org-mongos mongodb-org-shell mongodb-org-tools 文件位置 /var ...
- springboot中通用mapper结合mybatis generator的使用
通用mapper就是指的是 tk.mybatis 包下的.这个是通用mapper就是说自动生成的dao层需要继承这个框架提供的mapper类.而我们之前用的org.mybatis这个最开始是普通的 ...
- jquery validate 详解一
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html jQuery校验官网地址:http://bassistance.de/jquery-pl ...