（我师傅封装的）
引入：<teaThree v-if="EditDialog" :eqMod="editClass.classEquipments" :eqData="equipmentName" :num="10" :currData="getEqData"></teaThree>
utils里面引入：Vue.component('teaThree', require('./groupCom/teaThree'));
效果图(接口换了数据对不上)：
<template>
<div class="">
<div class="equipment" @click="iseqLef = !iseqLef">
<span class="eqSpa" v-for="(i, idx) in dataSet.mod" :key="idx">
<a class="eqSpa">{{ `${i.equipment_name}(${i.equipment_amount})` }}</a>
<i class="el-tag__close el-icon-close" @click="delMod(idx)"></i>
</span>
</div>
<div class="eq">
<transition name="group">
<el-scrollbar class="eqLayer" v-show="iseqLef">
<span class="eqSpa" v-for="(i, idx) in eqData" :class="{'eqSelected': dataSet.tabSel == i.equipment_id}"
@click="leftThree(i)" :key="idx">{{ i.equipment_name }}</span>
</el-scrollbar>
</transition>
<transition name="group">
<el-scrollbar class="eqLayerRight" v-show="iseqReg">
<span class="eqSpa" v-for="(i, idx) in count" :class="{'eqSelected': dataSet.numSel == (idx+1)}"
@click="rightThree(idx+1)" :key="idx">{{ `${idx+1} 个` }}</span>
</el-scrollbar>
</transition>
</div>
</div>
</template>
<style scoped>
/*tea Save*/
.equipment {
cursor: pointer;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
min-height: 40px;
max-height: 160px;
line-height: 40px;
outline: 0;
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.equipment span {
display: inline-block;
border-radius: 30px;
box-sizing: border-box;
border-color: transparent;
margin: 2px 0 2px 2px;
background-color: #f0f2f5;
height: 24px;
padding: 0 8px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
max-width: 99%;
float: left;
}
.equipment span a {
display: inline-block;
color: #909399;
text-decoration: none;
margin-right: 16px;
}
.equipment span i {
background-color: #c0c4cc;
right: 2px;
top: 0;
bottom: 0;
color: #fff;
transform: scale(.8);
border-radius: 50%;
text-align: center;
position: absolute;
cursor: pointer;
font-size: 12px;
height: 16px;
width: 16px;
line-height: 16px;
vertical-align: middle;
margin: auto;
}
/*tea Three*/
.eq {
margin-top: -14px;
}
.eqLayer {
position: absolute;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 160px;
background: #fff;
z-index: 99999;
border: 1px solid #dcdfe6;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.eqLayer span, .eqLayerRight span {
display: inline-block;
height: 35px;
width: 100%;
line-height: 35px;
text-indent: 5px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.eqLayer span:hover, .eqLayerRight span:hover {
background: #f5f7fa;
}
.eqSelected {
background: #f5f7fa;
}
.eqLayerRight {
position: absolute;
left: 160px;
height: 200px;
overflow: hidden;
width: 160px;
background: #fff;
z-index: 99999;
border: 1px solid #dcdfe6;
border-left: 0px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.group-enter-active, .group-leave-active {
transition: opacity .5s;
}
.group-enter, .group-leave-to {
opacity: 0;
}
</style>
<script>
export default {
props: ['eqMod', 'eqData', 'num', 'currData'],
data() {
return {
iseqLef: false,
iseqReg: false,
count: this.num ? this.num : 100,
dataSet: {
mod: [],
tabSel: 0,
tabData: {},
numSel: 1,
}
}
},
created() {
if(this.eqMod && this.eqMod.length > 0) this.dataSet.mod = this.eqMod
},
mounted() {
document.addEventListener('click', e => {
let eve = window.event || e
if (eve.target.className != 'eqSpa' && eve.target.className != 'equipment' && eve.target.className != 'eqSpa eqSelected') {
this.iseqLef = false
this.iseqReg = false
}
})
},
methods: {
leftThree(i) {
this.dataSet.tabData = i
if (!this.iseqReg) this.iseqReg = true
if (this.dataSet.tabSel != i.equipment_id) {
this.dataSet.tabSel = i.equipment_id
}
},
rightThree(idx) {
this.dataSet.numSel = idx
let data = this.dataSet.tabData
data.equipment_amount = idx
if (!this.dataSet.mod || this.dataSet.mod.length <= 0) {
this.dataSet.mod.push(data)
} else {
let dataLen = this.dataSet.mod
for (var i = 0; i < dataLen.length; i++) {
if (dataLen[i].equipment_id == data.equipment_id) {
this.dataSet.mod.splice(i, 1, data)
break
} else {
if (i == (dataLen.length - 1)) {
this.dataSet.mod.push(data)
break
}
}
}
}
this.currData(this.dataSet.mod)
this.iseqLef = false
this.iseqReg = false
},
delMod(i) {
if (this.dataSet.mod && this.dataSet.mod.length > 0) this.dataSet.mod.splice(i, 1)
this.currData(this.dataSet.mod)
}
}
}
</script>