需求类似穿梭框,但是左边移到右边后,左边数据只是禁掉,但还是保留。左边数据通过接口获取,后端分页。但是里面要是table显示多个字段。看了下插件穿梭框没有完全符合的,准备用ant-desgin-vue,结果公司原项目是vue2,要用只能用ant-desgin1版本,1版本又有些莫名其妙的bug,还要改他们的代码,太麻烦了,直接自己写了个,虽然写的很low,但是功能实现了,代码还可以优化。
效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/05871b87a55e4bb6b5afd264a1fba5e8.jpeg#pic_center)
<div class="myTranfer">
<div class="table1">
<div class="body">
<div class="search">
<el-input placeholder="输入名称或者邮箱搜索" clearable v-model="formConfig.searchInfo" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="getLeftData"></el-button>
</el-input>
</div>
<div class="tablePadding">
<el-table
ref="multipleTable"
class="minHeight"
:data="deviceData"
v-loading="searchLoading"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
:selectable="checkboxSelect"
width="55">
</el-table-column>
<el-table-column
label="用户名"
prop="username"
width="120" />
<el-table-column
prop="nickName"
label="昵称"
width="120" />
<el-table-column prop="gender" label="性别" />
<el-table-column
:show-overflow-tooltip="true"
prop="phone"
width="100"
label="电话"
/>
</el-table>
<el-pagination
class="myPagination"
@size-change="handleSizeChangeDivece"
@current-change="handleCurrentChangeDivece"
:current-page="pageDivece.page"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageDivece.size"
layout="total, sizes, prev, pager, next, jumper, ->"
:total="pageDivece.total"
></el-pagination>
</div>
</div>
</div>
<div class="center">
<el-button size="mini" plain type="primary" icon="el-icon-arrow-right" @click="moveToRight"></el-button>
<el-button size="mini" plain type="primary" icon="el-icon-arrow-left" @click="moveToLeft"></el-button>
</div>
<div class="table1">
<div class="body">
<div class="search">
<h4 class="h4">角色关联的用户</h4>
</div>
<div class="tablePadding">
<el-table
ref="multipleTableRight"
:data="deviceDataRight"
class="minHeight"
tooltip-effect="dark"
height="50"
:selection.sync="selectedRows"
style="width: 100%"
@selection-change="handleSelectionChangeRight">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="用户名"
prop="username"
width="120" />
<el-table-column
prop="nickName"
label="昵称"
width="120" />
<el-table-column prop="gender" label="性别" />
<el-table-column
:show-overflow-tooltip="true"
prop="phone"
width="100"
label="电话"
/>
</el-table>
</div>
</div>
</div>
</div>
data() {
return {
deviceData:[],
deviceDataLength:null,
pageDivece:{
page:1,
size:10,
total:0
},
searchLoading:false,
formConfig:{
searchInfo:null
},
deviceData: [ ],
deviceDataRight: [],
selectedRightRows:[],
selectedRows: [],
selectQueryUserByRoleInfo:{},
submitUserRoleLoading:false
}
},
handleSizeChangeDivece(val) {
this.pageDivece.size = val
this.pageDivece.page =0
this.getLeftData()
},
handleCurrentChangeDivece(val) {
this.pageDivece.page = val
this.getLeftData()
},
getLeftData(){
let datas={
page: this.pageDivece.page-1,
size:this.pageDivece.size,
blurry:this.formConfig.searchInfo
}
this.searchLoading=true
crudUser.get(datas).then(res=>{
this.searchLoading=false
this.deviceData=res.content
console.log(this.deviceData)
if (res.content && res.content.length > 0) {
this.setCheckedOnLoad()
}
this.pageDivece.total=res.totalElements
}).catch(()=>{
this.searchLoading=false
})
},
setCheckedOnLoad() {
this.deviceData.forEach(row => {
const found = this.deviceDataRight.some(item => item.id === row.id);
if (found) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(row, true);
})
}
});
console.log(this.selectedRows)
},
handleSelectionChange(selection) {
this.selectedRows = selection;
},
moveToRight() {
this.selectedRows.forEach(row => {
if (!this.deviceDataRight.some(item => item.id === row.id)) {
this.deviceDataRight.push(row);
this.$refs.multipleTable.toggleRowSelection(row, true)
}
});
this.selectedRows = [];
},
checkboxSelect(row) {
return !this.deviceDataRight.some(item => item.id === row.id);
},
moveToLeft() {
this.selectedRightRows.forEach(row => {
const index = this.deviceDataRight.findIndex(item => item.id === row.id);
if (index !== -1) {
this.$nextTick(() => {
this.deviceDataRight.splice(index, 1);
this.selectedRows = [];
});
}
this.$refs.multipleTable.selection.forEach((item,i)=>{
if(item.id==row.id){
this.$refs.multipleTable.toggleRowSelection(item);
}
})
});
this.selectedRightRows = [];
},
handleSelectionChangeRight(selection) {
this.selectedRightRows = selection;
},
.myTranfer{
display: flex;
justify-content: space-between;
.table1{
border: 1px solid #d9d9d9;
border-radius: 2px;
width: 525px;
::v-deep .el-checkbox__inner{
border: 1px solid #409eff;
}
::v-deep span.el-checkbox__input.is-disabled{
.el-checkbox__inner{
border: 1px solid #dcdfe6;
}
}
.header{
//width: 100%;
//padding: 7.4995px 12px 8.4995px;
//color: #000000d9;
//background: #fff;
//border-bottom: 1px solid #f0f0f0;
//border-radius: 2px 2px 0 0;
}
.body{
//position: relative;
//height: 100%;
font-size: 14px;
//padding-top: 56px;
.search{
//position: absolute;
//top: 0;
//left: 0;
width: 100%;
padding: 10px 15px;
::v-deep input.el-input__inner{
width: 100% !important;
}
}
.tablePadding{
padding: 5px;
}
}
}
.center{
padding: 0 10px;
margin-top: 230px;
//display: inline-grid;
width: 45px;
button{
height: 28px;
margin-top: 10px;
padding: 0 8px;
}
}
}
::v-deep .myPagination{
.el-input__inner{
width: inherit;
}
}
.minHeight{
min-height: 451px;
}
.h4{
line-height: 28px;
padding-left: 8px;
height: 32px;
margin-bottom: 0;
border-bottom: 1px solid #dfe6ec;
color: rgba(0, 0, 0, 0.7);
}