下面直接上代码
html代码块
<div class="three_inner">
<div class="my_wrap_left">
<div class="m_top">
<Select v-model="leftselectId" style="width:200px" @on-change="letfSelectFunc">
<Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
<div class="m_main">
<ul>
<li v-if="leftCheckList.length>0">
<div v-for="item in leftCheckList" :key="item.value">
<Checkbox v-model="item.flag" :value="item.flag" @on-change="checkFunc(item,item.flag,'left')">{{item.label}}</Checkbox>
</div>
</li>
</ul>
</div>
</div>
<div class="btn_group_wrap">
<div :class="{active:letfMoveDataList.length>0}" @click="moveFunc('left')">＞</div>
<div :class="{active:rightMoveDataList.length>0}" @click="moveFunc('right')">＜</div>
</div>
<div class="my_wrap_right">
<div class="m_top">
<Select v-model="rightselectId" style="width:200px" @on-change="rightSelectFunc">
<Option v-for="item in selectList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
<div class="m_main">
<ul>
<li v-if="rightCheckList.length>0">
<div v-for="item in rightCheckList" :key="item.value">
<Checkbox v-model="item.flag" :value="item.flag" @on-change="checkFunc(item,item.flag,'right')">{{item.label}}</Checkbox>
</div>
</li>
</ul>
</div>
</div>
</div>
css代码块
.three_inner {
margin-top:16px;
display: flex;
justify-content: center;
align-items: center;
.btn_group_wrap {
padding:20px 30px;
text-align: center;
flex: 0 0 120px;
width: 120px;
div {
padding:4px 10px 6px;
cursor: pointer;
font-size:32px;
line-height: 32px;
color:#dcdfe6;
border:1px solid #dcdfe6;
border-radius: 6px;
&:nth-child(2){
margin-top:20px;
}
&.active {
color: #fff;
border:1px solid #3360F8;
background-color: #3360F8;
}
}
}
.my_wrap_left,
.my_wrap_right {
flex: 0 0 230px;
width:230px;
border:1px solid #e2e5ea;
.m_top{
padding:10px;
background-color: #f7f9fa;
border-bottom: 1px solid #e2e5ea;
}
.m_main {
padding:8px 10px;
height:280px;
overflow: auto;
div {
margin-top: 10px;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-button {
height: 0;
}
&::-webkit-scrollbar-track { /*--??--*/
background-color: transparent;
}
&::-webkit-scrollbar-thumb { /*--????-*/
border-radius : 10px;
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #d0d4d5;
}
}
}
}
相关方法JS代码
data() {
return {
promoterList: [],
selectList: [{
value: '1',
label: '啊肥',
children: [{
value: '3',
label: '小肥',
flag: false
},
{
value: '4',
label: '小嗨',
flag: false
},
{
value: '5',
label: '小🐟',
flag: false
},
{
value: '6',
label: '小虾',
flag: false
}
]
},
{
value: '2',
label: '啊嗨',
children: [{
value: '7',
label: '小嗨',
flag: false
}]
}
],
selectList1: [{
value: '7',
label: '啊猛',
children: []
},
{
value: '8',
label: '啊废',
children: []
}
],
//第三步相关
leftselectId: '1',
rightselectId: '7',
letfSeleteData: [],
rightSeleteData: [],
leftCheckList: [],
rightCheckList: [],
letfMoveDataList: [], //待转移的数据
rightMoveDataList: [], //待转移的数据
}
},
letfSelectFunc(val) {
this.selectList.forEach(item => {
if (item.value == val) {
this.leftCheckList = item.children;
}
})
},
rightSelectFunc(val) {
this.selectList1.forEach(item => {
if (item.value == val) {
this.rightCheckList = item.children;
}
})
},
moveFunc(d) {
if (d == 'left') {
if (this.letfMoveDataList.length > 0) {
this.selectList1.forEach(item => {
if (item.value == this.rightselectId) {
this.letfMoveDataList.forEach(move => {
move.flag = false;
item.children.push(move);
})
this.selectList.forEach(item => {
if (item.value == this.leftselectId) {
this.letfMoveDataList.forEach(citem => {
item.children.forEach((ccitem, index) => {
if (citem.value == ccitem.value) {
item.children.splice(index, 1)
}
})
})
}
})
}
})
this.letfMoveDataList = [];
}
} else if ('right') {
if (this.rightMoveDataList.length > 0) {
this.selectList.forEach(item => {
if (item.value == this.leftselectId) {
this.rightMoveDataList.forEach(move => {
move.flag = false;
item.children.push(move);
})
this.selectList1.forEach(item => {
if (item.value == this.rightselectId) {
this.rightMoveDataList.forEach(citem => {
item.children.forEach((ccitem, index) => {
if (citem.value == ccitem.value) {
item.children.splice(index, 1)
}
})
})
}
})
}
})
this.rightMoveDataList = [];
}
}
},
checkFunc(data, val, d) {
data.flag = val;
if (d == 'left') {
if (val) {
this.letfMoveDataList.push(data);
} else {
this.letfMoveDataList.forEach((item, index) => {
if (item.value == data.value) {
this.letfMoveDataList.splice(index, 1);
}
})
}
} else if ('right') {
if (val) {
this.rightMoveDataList.push(data);
} else {
this.rightMoveDataList.forEach((item, index) => {
if (item.value == data.value) {
this.rightMoveDataList.splice(index, 1);
}
})
}
}
}
下面是效果图展示
