element穿梭框+上下移动以下是代码（附带效果图），有需要可以自己封装成组件。
<template>
<div class="transform-box">
<el-transfer
v-model="chooseRole"
filterable
:props="{
key: 'value',
label: 'label'
}"
:render-content="renderFunc"
:titles="['待选角色列表', '已选角色列表']"
:button-texts="['取消选择', '确定选择']"
: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: `备选项 ${ 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: ''
}
},
methods:{
//角色选择改变-监听穿梭框
roleChange(chooseRole, direction, moveKeys){
},
//右侧选中
choose(value){
console.log(555, value)
this.item = value;
},
//置顶事件
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("没有上移的空间了")
return
}
//改变的数组
let changeItem = JSON.parse(JSON.stringify(self.chooseRole[index]))
self.chooseRole.splice(index, 1)
self.chooseRole.splice(0, 0, changeItem)
}else{
self.$message.error("只能选择一条数据进行上下移动")
return
}
},
//置顶事件
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.$message("没有下移的空间了")
return
}
//改变的数组
let changeItem = JSON.parse(JSON.stringify(self.chooseRole[index]))
self.chooseRole.splice(index, 1)
self.chooseRole.splice(self.chooseRole.length, 0, changeItem)
}else{
self.$message.error("只能选择一条数据进行上下移动")
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("没有上移的空间了")
return
}
//改变的数组
let changeItem = 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("只能选择一条数据进行上下移动")
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) { // 这里是length-1,因为下标值从0开始
self.$message("没有下移的空间了");
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("只能选择一条数据进行上下移动");
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>
以上是单行移动的穿梭框代码
以下是效果：
