vue+element穿梭框渲染及实现

vue+element穿梭框渲染及实现

提示：本文主要回答穿梭框的渲染及实现

一、穿梭框模板粘贴？

根据需求粘贴需要穿梭框功能
链接：https://element.eleme.io/#/zh-CN/component/transfer
我这边是最基本的没有搜索框的穿梭框
图片展示：

<template>
				<el-transfer @change="handleChange" v-model="usersCourse" :props="{ key: 'cid',label: 'label'}" :titles="['所有课程', '已选课程']"
					:data="CourseData"></el-transfer>
			</template>

二、sc标签中数据定义

1.data部分定义

代码如下（示例）：

                CourseData: [],
				userId: "",
				usersCourse:[]

v-model中定义的是右边的数据，：data定义的左边的数据:props是绑定的数据，key和label分别是传入后台的id和名字

2.方法定义methods

左边数据渲染：created中

getCourseList().then(res => {
				this.CourseData = res.data
			})

代码如下（示例）：

//为按钮弹窗的方法，在弹弹出窗口时同时渲染右边数据
setCourse(o) {
				this.setCourseDiv = true
				this.userId = o.row.uid;
				getCoutseByUid({uid:this.userId}).then(res =>{
					if(res.code==0){
						for(var i=0;i<res.data.length;i++){
							this.usersCourse.push(res.data[i].cid)
						}
					}
					console.log(this.usersCourse)
				})
			},
			handleChange(value, direction, movedKeys) {
				console.log(value, direction, movedKeys)
				if (direction == 'right') {
					addCourseByUid({
						uid: this.userId,
						cidArr: value+""
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								showClose: true, //可关闭的弹窗
								message: res.msg,
								type: 'success',
								duration: '3000'
							});
							setTimeout(function() {
								window.location.reload();
							}, 1000);
						} else {
							this.$message.error(res.msg);
						}
					})
				} else {
					delCourseByUid({
						uid: this.userId,
						cidArr: movedKeys+""
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								showClose: true, //可关闭的弹窗
								message: res.msg,
								type: 'success',
								duration: '3000'
							});
							setTimeout(function() {
								window.location.reload();
							}, 1000);
						} else {
							this.$message.error(res.msg);
						}
					})
				}

			},

该处使用的url网络请求的数据。
有完整的一个教学管理项目，在主页，使用vue+element，级联列表，穿梭框，table和form等等。