![](https://i-blog.csdnimg.cn/blog_migrate/0c776102156a5590fbf4786b2aa7f761.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bbbec6d7b905f516e8ee9820e4d1c98f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9458dfb4bf8ffdc5bd3976ed9609b6f8.png)
<template>
<div class="transform-contain">
<div class="transform-left">
<div class="transform-left-header">
<div class="header-title">
<div>可选人员/部门</div>
<div>({{ minDataLeft.length }} / {{ tableLeft.length }})</div>
</div>
<el-input placeholder="请输入姓名" v-model="name" clearable></el-input>
<div class="tabs-main">
<div v-for="(item,i) in tabsArr" :key="i" class="tabs" :class="activeName===i?'isActive':''" @click="changeTabs(i)">{{ item }}</div>
</div>
<el-table
:data="filterData"
style="width: 100%"
height="167"
@row-click="rowClick"
:row-style="rowStyle">
<el-table-column
prop="realName"
label="人员"
align="center">
</el-table-column>
<el-table-column
prop="deptName"
label="部门"
align="center">
</el-table-column>
</el-table>
</div>
</div>
<div class="transform-btn">
<div class="btn" :class="minDataLeft.length?'color-btn':''" @click="toRight">
<i class="el-icon-arrow-right" style="color:#C0C4CC"></i>
</div>
<div class="btn">
<i class="el-icon-arrow-left" style="color:#C0C4CC"></i>
</div>
</div>
<div class="transform-right">
<div class="transform-right-header">
<div class="header-title">
<div>可选人员/部门</div>
<div>(0 / 40)</div>
</div>
<el-input placeholder="请输入姓名" ></el-input>
<div class="tabs-main">
<div v-for="(item,i) in tabsArr" :key="i" class="tabs" :class="tabs===i?'isActive':''" @click="changeTab(i)">{{ item }}</div>
</div>
<el-table
:data="tableRight"
style="width: 100%"
height="167">
<el-table-column
prop="realName"
label="人员"
align="center">
</el-table-column>
<el-table-column
prop="deptName"
label="部门"
align="center">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import { fetchDeparts, fetchUsers, fetchResourceTemplates } from '@/api/config';
export default {
data() {
return {
activeName: 0,
tabsArr: ['人员', '部门'],
tableLeft: [],
tabs: 0,
tableRight: [],
minDataLeft: [],
name: ''
};
},
created() {
this.fetchUsers();
},
computed: {
filterData() {
if (this.name === '') {
return this.tableLeft;
} else {
return this.tableLeft.filter(i => i.realName.indexOf(this.name) !== -1 || i.deptName.indexOf(this.name) !== -1);
}
}
},
methods: {
changeTabs(i) {
this.activeName = i;
},
changeTab(i) {
this.tabs = i;
},
rowStyle({row}) {
if (this.minDataLeft.includes(row)) {
return {
background: '#f5f1fe',
color: '#7c4eef'
};
}
},
rowClick(a) {
if (!this.minDataLeft.includes(a)) {
this.minDataLeft.push(a);
} else {
this.minDataLeft.map((item, i) => {
if (item.id === a.id) {
this.minDataLeft.splice(i, 1);
}
});
}
},
toRight() {
this.minDataLeft.map((item, i) => {
this.tableRight.push(item);
});
this.tableLeft = this.filterArray(this.tableLeft, this.minDataLeft);
this.minDataLeft = [];
},
filterArray(A, B) {
let newArr = A.filter((itemA) => {
return B.every((itemB) => {
return itemA.id !== itemB.id;
});
});
return newArr;
},
fetchUsers() {
fetchUsers().then((res) => {
this.tableLeft = res.data.data || [];
});
}
}
};
</script>
<style lang="scss" scoped>
/deep/.el-input{
.el-input__suffix{
top: -4px;
}
.el-input__inner{
height: 26px;
border-radius: 13px;
}
}
/deep/.el-table{
.el-table__header-wrapper{
display: none !important;
}
}
/deep/ .el-table__body{
border-collapse: separate;
border-spacing: 0px 4px;
.el-table__row{
>td{
height: 24px !important;
padding: 0;
border: none;
line-height: 24px;
cursor: pointer;
&:nth-child(2){
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
// color: #919399;
line-height: 17px;
}
}
}
}
/deep/ .el-table::before {
height: 0px;
}
.transform-contain{
margin: 50px 0 0 30px;
display: flex;
.transform-left{
box-sizing: border-box;
width: 280px;
height: 280px;
border-radius: 8px;
border: 1px solid #DDDFE6;
padding: 10px 0;
.transform-left-header{
padding: 0 17px 0 13px;
.header-title{
display: flex;
justify-content: space-between;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #606266;
line-height: 20px;
margin-bottom: 8px;
}
.tabs-main{
display: flex;
justify-content: space-between;
.tabs{
width: 50%;
text-align: center;
border-bottom: 2px solid #e4e7ed;
cursor: pointer;
height: 36px;
line-height: 36px;
}
.isActive{
border-bottom: 2px solid #7c4eef;
}
}
}
}
.transform-btn{
width: 32px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
.btn{
width: 24px;
height: 24px;
background: #ECEEF5;
border-radius: 2px;
padding: 0;
margin-left: 4px !important;
margin-bottom: 4px;
line-height: 24px;
text-align: center;
}
.color-btn{
background-color: #7c4eef;
}
}
.transform-right{
box-sizing: border-box;
width: 280px;
height: 280px;
border-radius: 8px;
border: 1px solid #DDDFE6;
padding: 10px 0;
.transform-right-header{
padding: 0 17px 0 13px;
.header-title{
display: flex;
justify-content: space-between;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #606266;
line-height: 20px;
margin-bottom: 8px;
}
.tabs-main{
display: flex;
justify-content: space-between;
.tabs{
width: 50%;
text-align: center;
border-bottom: 2px solid #e4e7ed;
cursor: pointer;
height: 36px;
line-height: 36px;
}
.isActive{
border-bottom: 2px solid #7c4eef;
}
}
}
}
}
</style>>
此代码只实现左穿梭去右边,如果想完整的实现可以仿照我左去右完成右去左