从el-select如何做多个tag才省略，看如何改造第三方组件的满足需求的万用思路

最新推荐文章于 2025-12-05 11:18:55 发布

原创最新推荐文章于 2025-12-05 11:18:55 发布 · 195 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js

如何处理.一些第三方组件库没有提供的效果

1.css控制视觉效果,虚拟达成

2.js 回归原始的dom操作

<template>
  <div>
    <el-select
      v-model="value1"
      multiple
      @change="handleChange"
      style="margin-left: 300px;"
      placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
let span = document.createElement("span");
span.setAttribute("class","numCounter");
export default {
  name: "index",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: [],
    }
  },
  mounted() {
    document.querySelector(".el-select").appendChild(span);
  },
  methods: {
    handleChange(val) {
      if(val.length > 2 ){
        span.setAttribute("style","display:inline-block");
        span.innerHTML = `+${val.length - 2}`
      }else {
        span.setAttribute("style","display:none");
      }
    }
  }
}
</script>

<style scoped>
.el-select{
  width: 500px;
}
.el-tag.el-tag--info:nth-child(n+3){
  display: none;
}
.el-tag .el-tag--info:nth-child(n+3){
  display: none;
}
::v-deep .numCounter {
  display: none;
  position: absolute;
  top: 0px;
  right: 36px;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  border-radius: 5px;
  padding: 0px 5px;
}
</style>