vue 穿梭框组件

前言：由于项目需要，element ui 里面的穿梭框不满足需求，所以自己封装了一个穿梭框，此穿梭框为三个，可以两两穿梭。

如下图：

代码如下：如有bug ,欢迎指出；其实数据的传输，最好用vuex 来做；下面用的props ,监听来做的。

其中需要判断的几个点：大家参考下

1）：操作按钮什么情况下可以点，什么情况下致灰；利用:disabled 来判断的

2）：穿梭框里面的选项，什么情况下可以点，什么情况下不能点；利用:disabled 来判断的

3）：每个框里面的数据全部分为展示用的，和选中操作用的，注意他们之间的互相计算

4）：每操作完一步，注意清空数据和合并数据

<template><div class="shuttle"><div class="shuttle_item"><span>区域内学校</span><ul class="school"><li v-for="(item,index) in allSchool" :key="index"><input type="checkbox" :id="item.userId" :value="item.userId"v-model="schoolsNames":disabled="teamName.length>0||teamLeader.length>0?true:false"><label :for="item.userId">{{item.username}}</label></li></ul></div><div class="shuttle_arrow"><el-button icon="el-icon-d-arrow-right" type="primary" plain @click="toRightTeam":disabled="schoolsNames.length==0?true:false">到右边</el-button><el-button icon="el-icon-d-arrow-left" type="primary" plain class="go_left":disabled="teamName.length==0?true:false" @click="toLeftSchools">到左边</el-button></div><div class="shuttle_item"><span>小组成员</span><ul class="school"><li v-for="(item ,index ) in allTeam" :key="index"><input type="checkbox" :id="item.userId" :value="item.userId"v-model="teamName":disabled="schoolsNames.length>0||teamLeader.length>0?true:false"><label for="item.userId">{{item.username}}</label></li></ul></div><div class="shuttle_arrow"><el-button icon="el-icon-d-arrow-right" type="primary" plain:disabled="teamName.length==0?true:false"@click="toRightLeader">到右边</el-button><el-button icon="el-icon-d-arrow-left" type="primary" plain class="go_left":disabled="teamLeader.length==0?true:false"@click="toLeftTeam">到左边</el-button></div><div class="shuttle_item"><span>小组组长</span><ul class="school"><li v-for="(item,index) in leader" :key="index"><input type="checkbox" :id="item.userId" :value="item.userId"v-model="teamLeader":disabled="schoolsNames.length>0||teamName.length>0?true:false"><label :for="item.userId">{{item.username}}</label></li></ul></div></div>
</template><script>export default {name: "shuttle",data() {return {allSchool: [],//所有学校allTeam: [],  //所有小组leader:[],// 组长schoolsNames: [],   //所有学校 选中的teamName: [],   //小组成员  选中的teamLeader: [],   //小组组长  选中的}},props: ["schoolInfo","teamInfo","leaderInfo"],created() {},mounted() {},watch: {schoolInfo(val) {   //  编辑时用来回显，添加时的默认数据this.schoolInfo = val;this.allSchool = val;},teamInfo(val){   //  编辑时用来回显this.teamInfo = val;this.allTeam=val;},leaderInfo(val){   //  编辑时用来回显this.leaderInfo=val;this.leader=val;},},methods: {async toRightTeam() {let moveName= await this.matching(this.allSchool,this.schoolsNames);let allArr= await this.myFilter(this.allSchool,moveName);this.allSchool = allArr;for(let i=0;i<moveName.length;i++){this.allTeam.push(moveName[i])}this.schoolsNames=[];await this.putParentsTeams();},async toLeftSchools() {let moveName= await this.matching(this.allTeam,this.teamName);let allArr =await this.myFilter(this.allTeam,moveName);this.allTeam = allArr;for(let i=0;i<moveName.length;i++){this.allSchool.push(moveName[i])}this.teamName=[];await this.putParentsTeams();},async toRightLeader() {if (this.leader.length >= 1||this.teamName.length>1) {this.$message({message: "小组组长只能选一个",type: "error"});return false;}let moveName= await this.matching(this.allTeam,this.teamName);let allArr =await this.myFilter(this.allTeam,moveName);this.allTeam = allArr;for(let i=0;i<moveName.length;i++){this.leader.push(moveName[i])}this.teamName=[];await this.putParentsTeams();},async toLeftTeam() {let moveName= await this.matching(this.leader,this.teamLeader);let allArr =await this.myFilter(this.leader,moveName);this.leader = allArr;for(let i=0;i<moveName.length;i++){this.allTeam.push(moveName[i])}this.teamLeader=[];await this.putParentsTeams();},// 过滤 相同选项async myFilter(allArr, selArr) {let ary03 = [];for (let i = 0; i < allArr.length; i++) {for (let j = 0; j < selArr.length; j++) {if (allArr[i].userId == selArr[j].userId) {allArr.splice(i,1);}}}return allArr;},//  匹配 移动的 选项async matching(allArr, matchArr) {let matArr = [];for (let i = 0; i < allArr.length; i++) {for (let j = 0; j < matchArr.length; j++) {if (allArr[i].userId == matchArr[j]) {matArr.push(allArr[i]);}}}return matArr;},//    向父组件传组员名称 和组长id   由于这是单独的一个穿梭框组件，数据会和父组件里面的动态绑定，提交按钮也在父组件，所以需要此步骤，async putParentsTeams() {this.$emit('teamNames', this.allTeam,this.leader);},},}
</script><style lang="scss" scoped>ul li {list-style: none;}.shuttle {display: flex;flex-direction: row;justify-content: center;.shuttle_item {width: 20%;span {font-size: 16px;margin-left: 50px;}}.shuttle_arrow {width: 10%;display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0 30px 0 20px;.go_left {margin-left: 0;margin-top: 15px;}}.school {border: 1px solid #c8c9cc;padding: 0 10px;border-radius: 5px;height: 150px;overflow: auto;li {padding-top: 10px;}}}
</style>

vue 穿梭框组件相关推荐

教你从零写vue穿梭框
教你从零写vue穿梭框 1. 前言 2. 制作选择组件(select-input) 2. 制作vue穿梭框组件(table-transfer) 4. 将选择组件和穿梭框组件结合使用 4.1 点击选择组 ...
一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui 官网npm文档:https://www.npmjs.com/ ...
vue仿iview穿梭框组件
vue仿iview穿梭框组件微信公众号:前端程序猿之路关注可了解更多的前端知识,反馈问题或建议,请公众号留言. 如果你觉得公众号内容对你有帮助,欢迎关注并转载穿梭框中左侧为源数据,右侧为目标数据 ...
vue模态框组件拿不到dom元素
今天在写模态框的组件时,在一个页面引入了模态框组件.但是模态框设置初始是不显示的,然后我在模态框组件里面的mouted里面拿到dom元素,按理来说mouted都已经加载完元素了,但是我不管是通过doc ...
php穿梭框多选,多选穿梭框总结（vue + element）
示例介绍实现省市区三级多选联动,可任选一个省级.市级.区级,加入已选框,也可以在已选框中删除对应的区域. 选择对应仓库,自动勾选仓库对应的省,取消就反选选择同样地区,选择省级或市级,若该对象下面 ...
在vue项目中使用树形结构的穿梭框
先看一下最后的效果: 一个基于elementui的穿梭框组件:el-tree-transfer 第一步:安装组件 npm install el-tree-transfer --save 第二步:写代码 ...
vue项目使用树形数据穿梭框
文档地址:快速进入基本步骤代码: npm install el-tree-transfer --save //下载依赖import treeTransfer from 'el-tree-transf ...
el-tree与el-transfer结合成树形穿梭框（tree-transfer）
下载 npm install el-tree-transfer --save <tree-transfer :title="['模块(菜单)访问权限', '拥有的操作权限']" ...

vue 穿梭框组件

vue 穿梭框组件相关推荐

最新文章

热门文章

vue 穿梭框 组件

vue 穿梭框 组件相关推荐

最新文章

热门文章

vue 穿梭框组件

vue 穿梭框组件相关推荐