今天简单记录一下用到的elementui穿梭框的使用
我需要新建一个项目,要传的参数包括项目名字和描述,还有一堆文件列表的id

这个时候就会用到elementui的穿梭框,不废话直接上代码

首先获取我需要的文件列表 里面包括文件的名字,id,文件大小等等
//获取文件列表 fileList() { this.axios({ url: API.filesList, method: "get" }).then(
res=> { this.fileArr = res.data.data; console.log(this.fileArr); }); },
data里return的代码
//添加项目传入数据选项 form: { entryName: "", describe: "" }, fileArr: [], //穿梭框文件列表
fileIdArr: [], //穿梭框文件id数组 yesData: [1, 2], // 注意:key 的字符类型要一致!!!
然后这是html代码
<div class="SelectFile" ref="SelectFile"> <el-form :model="form" action> <
el-form-item label="项目名称" :label-width="formLabelWidth" class="project"> <
el-input v-model="form.entryName" autocomplete="off"></el-input> </el-form-item>
<el-form-item label="描述" :label-width="formLabelWidth" class="project"> <
el-input v-model="form.describe" autocomplete="off"></el-input> </el-form-item>
<el-form-item label="文件列表" :label-width="formLabelWidth" class="project"> <
el-transfer v-model="yesData" :props="{key: 'id',label: 'fileName'}" :titles="['
文件列表', '已选文件']" @change="handleChange" :data="fileArr" ></el-transfer> </
el-form-item> <el-form-item label="" :label-width="formLabelWidth" class="
project"> <el-button type="primary" @click="sub">创建</el-button> </el-form-item>
</el-form> </div>
绑定的事件代码
//右侧数据变动触发函数 handleChange(value, direction, movedKeys) { console.log(value,
direction, movedKeys); this.fileIdArr = movedKeys; //文件列表的id数组 },
创建事件代码
//提交选择文件 使文件列表显示 穿梭框隐藏 sub() { this.$refs.SelectFile.style.display = "none";
this.$refs.list.style.display = "block"; var dataArr = new URLSearchParams();
dataArr.append("entryName", this.form.entryName); dataArr.append("describe",
this.form.describe); dataArr.append("baiPath", this.fileIdArr); this.axios({ url
: API.hla1addProject, method: "post", data: dataArr }).then(d => { console.log(d
); this.req(); if (d.data.success === "true") { this.$message({ message: d.data.
msg, type: "success" }); this.selctlist(); } else { this.$message({ message: d.
data.msg, type: "warning" }); } }); },

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述