问答

el-select多选以tag展示时,超过显示长度以...省略号显示

作者:admin 2021-05-11 我要评论

tag标签过长时,会出现“溢出”的情况,想要当超过后自动截取并以省略号显示 目前 想要实现的结果 目前的写法没有实现 代码 el-select v-show="overviewVO.adTyp...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

tag标签过长时,会出现“溢出”的情况,想要当超过后自动截取并以省略号显示
目前
image.png
想要实现的结果
image.png
目前的写法没有实现
代码

<el-select
                        v-show="overviewVO.adType !== 'COMPANY'"
                        :multiple="overviewVO.adType === 'GROUP' ? true : false"
                        collapse-tags
                        v-model="ancountVO.advertisersId"
                        placeholder="请选择广告组"
                        size="small"
                        @change="selectAdvertisers"
                        clearable
                    >
                    <el-option
                        v-for="item in codeList.advertisersList"
                        :key="item.advertisersId"
                        :label="item.advertisersName"
                        :value="item.advertisersId"
                    />
                    </el-select>

css:

// select的tags过长显示...
.el-select__tags-text {
  display: inline-block;
  max-width: 140px;
  @media (max-width: 1400px) {
    max-width: 42px;
  }
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.el-select .el-tag__close.el-icon-close {
  top: -7px;
  right: -4px;
}
###

可以看下这个,如果不行应该需要配合/deep/使用:

.el-cascader__tags .el-tag:nth-child(1){
  max-width: 100px;
  overflow:hidden;
}

image.png

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • el-select多选以tag展示时,超过显示长

    el-select多选以tag展示时,超过显示长

  • ThinkPHP5.1x数据查询表达式报错,和5.

    ThinkPHP5.1x数据查询表达式报错,和5.

  • 如何在echarts热图上添加自定义的边框

    如何在echarts热图上添加自定义的边框

  • 怎样把一个圆做成响应式呢?怎样动态设

    怎样把一个圆做成响应式呢?怎样动态设

腾讯云代理商
海外云服务器