vue-elementUIの選択ドロップダウン複数選択コンポーネントの実装：検索可能+ポップアップウィンドウにすべての機能が表示されます

方法1：更新ライフサイクルで+2 dom要素を取得し、クリックイベントを追加して、
要素を使用できるコンポーネントを検索およびドロップダウンします。

 <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ボタンにボックスを追加してから、クリックイベントをボックスに追加します。少し低い
マルチセレクト

デジタルポップアップウィンドウをクリックします

<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>