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

相关推荐

  1. vue实现联动(一)

    2024-07-20 15:54:01       45 阅读
  2. vue实现联动(二)

    2024-07-20 15:54:01       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 15:54:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 15:54:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 15:54:01       82 阅读
  4. Python语言-面向对象

    2024-07-20 15:54:01       92 阅读

热门阅读

  1. 反悔贪心

    2024-07-20 15:54:01       26 阅读
  2. 我们的耳穴项目迈进了一大步

    2024-07-20 15:54:01       26 阅读
  3. 【前后端联调】HttpMessageNotReadableException

    2024-07-20 15:54:01       22 阅读
  4. 恒等式结论

    2024-07-20 15:54:01       22 阅读
  5. Https post 请求时绕过证书验证方案

    2024-07-20 15:54:01       26 阅读
  6. 素数极差

    2024-07-20 15:54:01       21 阅读
  7. 数据结构——栈

    2024-07-20 15:54:01       24 阅读
  8. 量化交易对短期收益的提升效果

    2024-07-20 15:54:01       21 阅读
  9. ArcGIS Pro SDK (九)几何 9 立方贝塞尔线段

    2024-07-20 15:54:01       21 阅读
  10. glibc: getifaddrs_internal 占用大量cpu

    2024-07-20 15:54:01       21 阅读
  11. 【关于使用swoole的知识点整理】

    2024-07-20 15:54:01       17 阅读