Here is the code (with renderings), which you can wrap yourself into components if necessary.

<template> <div class="transform-box"> <el-transfer v-model="chooseRole" filterable :props="{ key: 'value', label: 'label'}" :render-content="renderFunc" :titles="[' list of selected characters ', 'list of selected characters ']" :button-texts="[' de-selected ', ${total} : ${total}', hasChecked: ${total}']" :format="{noChecked: ${total}', hasChecked: '${checked}/${total}' }" target-order="push" @change="roleChange" :data="roleData" @right-check-change="choose" > <el-button class="transer-footer ml10" slot="right-footer" size="mini" @click="handleTop(index)" > </el-button> <el-button class="transer-footer ml10" slot="right-footer" size="mini" @click="handleUp(index)" > </el-button> <el-button class="transer-footer" slot="right-footer" size="mini" @click="handleDown(index)" > </el-button> <el-button Class ="transer-footer ml10" slot="right-footer" size="mini" @click="handleBottom(index)" > </el-button> </el-transfer> </div> </template> <script> export default { data(){ const generateData = _ => { const data = []; for (let i = 1; i <= 15; I++) {data. Push ({value: I, label: ` alternatives ${I} `, / / disabled: I % 4 = = = 0}). } return data; }; return{ roleData: generateData(), chooseRole: [], renderFunc(h, option){ return (<span><span>{option.label}</span><i class="el-icon-edit"></i></span>) }, sort: '', item: '', index: // Choose (value){console.log(555){// Select (value){console.log(555); value) this.item = value; }, // put the top event handleTop(item, index){let self = this; item = self.item; if(item.length == 1){ self.chooseRole.find((val, indexs, Arr) => {if(val == item){index = indexs}}) if(index == 0){self.$message(" there is no space to move up ") return  = JSON.parse(JSON.stringify(self.chooseRole[index])) self.chooseRole.splice(index, 1) self.chooseRole.splice(0, 0, HandleBottom (item, index){let self = this; item = self.item; if(item.length == 1){ self.chooseRole.find((val, indexs, Arr) => {if(val == item){index = indexs}}) if(index == self.chooserole.length -1){self. Parse (json.stringify (self.chooserole [index])) self.chooserole.splice (index, self.chooserole) 1) self.chooseRole.splice(self.chooseRole.length, 0, ChangeItem)}else{self.$message.error(" select only one item to move up or down ") return}}, handleUp(item, index){let self = this; item = self.item; if(item.length == 1){ self.chooseRole.find((val, indexs, Arr) => {if(val == item){index = indexs}}) if(index == 0){self.$message(" there is no space to move up ") return  = JSON.parse(JSON.stringify(self.chooseRole[index - 1])) console.log(33, changeItem) self.chooseRole.splice(index - 1, 1) self.chooserole.splice (index, 0, changeItem)}else{self.$message.error(" select only one data to move up or down ") return}}, HandleDown (item, index){let self = this; item = self.item; If (item.length == 1) {self.chooserole.find ((val, indexs, arr) => {if (val == item) {index = indexs; }}); If (index == self.chooserole.length-1) {// if (index == self.chooserole.length-1) {// if (index == self.chooserole.length-1) {// If (index == self.chooserole.length-1) {self. return; } let changeItem = JSON.parse(JSON.stringify(self.chooseRole[index])); self.chooseRole.splice(index,1); self.chooseRole.splice(index + 1, 0, changeItem); } else {self.$message.error(" select only one data to move up or down "); return; } }, }, mounted(){} } </script> <style> .el-transfer-panel__item .el-checkbox__input { position: absolute; top: 8px; left: 30px; } .el-checkbox:last-of-type { margin-right: 30px; } .el-button--mini, .el-button--mini.is-round { padding: 3px 6px; } </style>Copy the code

This is the code for moving the shuttle box in a single line

Here are the results: