Vue 多选下拉框+下拉框列表中增加标签

1、效果图

2、代码部分

（1）代码

<el-select class="common-dialog-multiple multipleSelectStyle" @change="clusterListChange" v-model="form.clusterId" placeholder="请先选择" multiple filterable default-first-option :popper-append-to-body="false">
  <el-option v-for="item in clusterList" :key="item.id" :label="item.name" :value="item.id">
    <el-checkbox @change="clickTenantBox(item.id)" :value="form.clusterId.includes(item.id)" :label="item.name">
      <span class="checkbox-label">{{ item.name }}</span>
      <span class="checkbox-tag" v-if="item.alias">
        <el-tag :type="item.alias=='远程'?'success':''">{{ item.alias }}</el-tag>
      </span>
    </el-checkbox>
  </el-option>
</el-select>

（2）数据定义

clusterList: [
  {
    id:1,
    name: '集群1',
    alias: '远程',
  },
  {
    id:2,
    name: '集群2',
    alias: '别名',
  },
  {
    id:3,
    name: '集群3',
  },
  {
    id:4,
    name: '集群4',
    alias: '远程',
  },
  {
    id:5,
    name: '集群5',
    alias: '别名',
  },
  {
    id:6,
    name: '集群6',
  },
  {
    id:7,
    name: '集群7',
    alias: '远程',
  },
  {
    id:8,
    name: '集群8',
    alias: '别名',
  },
  {
    id:9,
    name: '集群9',
  },
],

（3）方法

clickTenantBox(val) {
  let values = this.form.clusterId;
  if (values.includes(val)) {
    this.form.clusterId = values.filter(n => n !== val);
  } else {
    values.push(val);
    this.form.clusterId = values;
  }
},
clusterListChange(){
  console.log(this.form.clusterId)
},

（4）样式

.multipleSelectStyle {
  .el-select__tags {
    flex-wrap: unset;
    overflow: auto;
    margin-left: 2px;
  }
}

.multipleSelectStyle ::-webkit-scrollbar {
  display: none;
}

.common-dialog-multiple{
  .el-tag--small{
    height: 18px;
  }

  .el-select-dropdown__list{
    padding: 5px 13px 5px 8px;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item{
    padding-left: 12px;
    padding-right: 0;
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 4px;

    .el-checkbox{
      width: 100%;

      .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #19BBFF !important;
        font-weight: 600;
      }

      .el-checkbox__input{
        margin-top: -10px;

        .el-checkbox__inner{
          border: 1px solid #B0C0C5;
        }
      }

      .el-checkbox__label {
        width: calc(100% - 15px);
        height: 32px;

        .checkbox-label{
          display: inline-block;
          //width: calc(100% - 40px);
          max-width:calc(100% - 60px);
          overflow: hidden;
          text-overflow: ellipsis;
          padding-top: 7px;
        }

        .checkbox-tag{
          float: right;
          margin-right: 10px;
          padding-top: 6px;

          .el-tag {
            border-radius: 4px;
            background: #F8B02D14;
            border: 1px solid #F8B02D99;
            color: #FFA901;
            height: 18px;
            padding: 0 7px;
            line-height: 18px;
            font-size: 12px;
          }

          .el-tag.el-tag--success {
            background: #22CE7614;
            border: 1px solid #22CE7699;
            color: #2DC86D;
          }
        }
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item:last-child{
    margin-bottom: 4px;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #ecf8fb;
    color: #19bbff;
    .el-checkbox{
      .el-checkbox__input .el-checkbox__inner{
        border-color: #19BBFF !important;
      }
      .el-checkbox__label{
        color: #19BBFF !important;
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    color: #18bbff;
    background: #fff;

    .el-checkbox{
      .el-checkbox__input .el-checkbox__inner{
        border-color: #19BBFF !important;
      }
      .el-checkbox__label{
        color: #19BBFF !important;
        font-weight: 600;
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
    content: none;
  }
}

.el-checkbox__inner::after{
  transition: transform .0s ease-in .0s,-webkit-transform .0s ease-in .0s !important;
}