方法1:在update生命周期下面获取+2的dom元素,然后添加点击事件
搜索和下拉可以用element的组件
<el-form-item label="标签">
<!-- 弹窗现实所有选择项 -->
<el-dialog
title="折叠的标签"
:visible.sync="dialogVisible"
width="30%"
:modal="false">
<span v-for="(item,i) in form.labelList" :key="i">{
{
item}}</span>
</el-dialog>
<!-- 选中 -->
<el-select
v-model="form.labelList"
filterable
collapse-tags
multiple
popper-class='selectShow'
placeholder="下拉选择标签"
>
<!-- 下拉选项 -->
<el-option
v-for="(item,i) in filterList.selectLabel" :key="i"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
updated () {
//设置标签的弹出窗口
let self = this
let dom1 = document.querySelectorAll('.el-select__tags-text')
this.$nextTick(function() {
if(dom1[1]){
dom1[1].addEventListener('click',(e)=>{
e.stopPropagation()
this.dialogVisible = true
})
}
})
},
方法2:在+2按钮上面加一个盒子,然后给盒子加点击事件,有点low
多选
点击数字弹窗
<template>
<div class="box">
<span v-if="value.length>0" class="heiz" @click="dialogVisible=true"></span>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
:modal="false">
<span v-for="(item,i) in value" :key="i">{
{
item}}</span>
</el-dialog>
<el-select v-model="value"
filterable
collapse-tags
multiple
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
dialogVisible:false,
options: [{
value: '黄金糕',
label: '黄金糕'
}, {
value: '双皮奶',
label: '双皮奶'
}, {
value: '蚵仔煎',
label: '蚵仔煎'
}, {
value: '龙须面',
label: '龙须面'
}, {
value: '北京烤鸭',
label: '北京烤鸭'
}],
value: [],
}
},
}
</script>
<style lang="less" >
.box{
position: relative;
}
/deep/ .el-input__inner{
height: none;
}
.heiz{
position: absolute;
width: 35px;
height: 20px;
// background-color: aqua;
z-index: 100;
top: 50%;
right: 49%;
transform: translateY(-50%);
}
.el-dialog__body>span{
margin: 0 10px;
}
.el-dialog__body{
padding: 10px 20px;
}
</style>