Today, I'd like to make a brief record of what I use elementui Use of shuttle box
I need to create a new project , Parameters to be passed include project name and description , There's also a list of files id

It will be used at this time elementui The shuttle box , No nonsense, code directly

First get the list of files I need It includes the name of the file ,id, File size, etc
// Get file list fileList() { this.axios({ url: API.filesList, method: "get" }).then(
res=> { this.fileArr =; console.log(this.fileArr); }); },
data in return Code for
// Add project incoming data option form: { entryName: "", describe: "" }, fileArr: [], // Shuttle box file list
fileIdArr: [], // Shuttle box file id array yesData: [1, 2], // be careful :key The type of characters should be consistent !!!
And then this is html code
<div class="SelectFile" ref="SelectFile"> <el-form :model="form" action> <
el-form-item label=" entry name " :label-width="formLabelWidth" class="project"> <
el-input v-model="form.entryName" autocomplete="off"></el-input> </el-form-item>
<el-form-item label=" describe " :label-width="formLabelWidth" class="project"> <
el-input v-model="form.describe" autocomplete="off"></el-input> </el-form-item>
<el-form-item label=" File list " :label-width="formLabelWidth" class="project"> <
el-transfer v-model="yesData" :props="{key: 'id',label: 'fileName'}" :titles="['
File list ', ' Selected files ']" @change="handleChange" :data="fileArr" ></el-transfer> </
el-form-item> <el-form-item label="" :label-width="formLabelWidth" class="
project"> <el-button type="primary" @click="sub"> establish </el-button> </el-form-item>
</el-form> </div>
Bound event code
// Right data change trigger function handleChange(value, direction, movedKeys) { console.log(value,
direction, movedKeys); this.fileIdArr = movedKeys; // File list id array },
Create event code
// Submit selection file Make file list display Shuttle box hidden sub() { this.$ = "none";
this.$ = "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 ( === "true") { this.$message({ message:
msg, type: "success" }); this.selctlist(); } else { this.$message({ message: d.
data.msg, type: "warning" }); } }); },

©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element