element-ui select组件中复选时以字符串形式显示

我使用的element-ui的版本是1.4.13。如上图所示,使用el-select组件,要实现可搜索、可复选、可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求,要调整为以下样式:1、复选时,输入框中不以标签的形式展示,而是以字符串的形式展示。2、超出部分显示省略号,并且鼠标移入显示提示框,用来展示全选的内容。下面是源码修改部分:(1)在selec...
摘要由CSDN通过智能技术生成

我使用的element-ui的版本是1.4.13。

1354858-20190201151210879-1967796014.png

如上图所示,使用el-select组件,要实现可搜索、可复选、可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求,要调整为以下样式:

1354858-20190201151645615-630868795.png

1、复选时,输入框中不以标签的形式展示,而是以字符串的形式展示。

2、超出部分显示省略号,并且鼠标移入显示提示框,用来展示全选的内容。

下面是源码修改部分:

(1)在select的props中添加了一个参数noTag用来控制是否以字符串形式显示输入框中的数据。添加了上面的el-popover标签,主要是文字超出时显示,这个后面再讲。底下的span标签就是在noTag参数为true时显示,data中添加currentSelLabel,用来显示处理后的多选数据,将数组转成字符串。
1354858-20190201152906840-1433127388.png

(2)在这里加了一个类,主要是方便后面加span标签的css样式。在select.css文件中的css样式如下面代码所示:
1354858-20190201153532063-1973343378.png

.el-select__tags.noTags .noTagSpan{
    display: inline-block;
    font-size: 12px;
    width: 100%;
    padding:0 6px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
}

(3)在noTag参数为true时显示class="noTagSpan"的span标签时,对应的el-tag标签就不再显示,如图所示,也需要在el-tag标签中添加noTag控制
1354858-20190201153926058-1914121120.png

(4)在setSelected方法中处理多选时的数据,将数组转成字符串,如下图所示:
1354858-20190201154258143-1170732633.png

(5)文字超出时显示提示框,效果如下:
1354858-20190201154451505-1946069857.png

需要在methods中添加如下方法:

 //当复选时文字超出输入框,出现提示框
        showSpanTooltip: function (event) {
            if(!this.showpop) return;
            var ev = event || window.event;
            var eventName = ev.target.className;
            if (eventName.indexOf('noTagSpan') != -1) {
                if (ev.target.offsetWidth < ev.target.scrollWidth) {
                    var tooltip = this.$refs.textTooltip;
                    tooltip.referenceElm = ev.target;
                    tooltip.$refs.popper.style.display = 'none';
                    tooltip.doDestroy();
                    tooltip.showPopper = true;
                }
            }
        },
        //当复选时文字超出输入框,隐藏提示框
        hiddenSpanTooltip: function () {
            if(!this.showpop) return;
            const tooltip = this.$refs.textTooltip;
            if (tooltip) {
                tooltip.doClose() ;
                tooltip.doDestroy();
            }
        }

(6)多选时,可搜索。按照组件现在的,搜索框会在选项的下面出现,这样会撑开输入框的高度。
1354858-20190201154653523-953294881.png

这里需要调整,将输入框放在下面的下拉菜单中,如图所示:
1354858-20190201154941511-445851714.png
代码如下:
1354858-20190201155043939-1523592946.png
避免跟element原有的搜索框冲突,加了参数控制:
1354858-20190201155218077-1605789784.png

需要在select.css加入如下样式:

.noTagInputDiv{
    border: 1px solid rgb(191, 193, 217);
    margin-left: -1px;
    margin-top:-30px;
    width: 100%;
    max-width: 185px;
    padding-right: 30px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
}

这个时候需要在下拉出现的时候调整整个下拉菜单的位置,具体修改代码的地方如下:
在data中加入initPopperTop,用来记录初始时下拉菜单的位置:
1、在watch中的visible中
1354858-20190201155807387-944775440.png
2、在watch中的query中
1354858-20190201155834502-1172014235.png
3、methods的resetInputHeight方法中
1354858-20190201155918179-1495870926.png

(7)多选时并且可搜索时,如果条目不存在时,创建条目,并且显示在下拉菜单中,这样可以通过反选删除选中的数据。
1、添加el-option标签,用来显示创建的条目。在data中添加mulOptions数组,用来记录创建的条目。
1354858-20190201160152123-706625129.png

2、handleOptionSelect方法中处理数据
1354858-20190201161036903-1978187804.png

3、在option.vue的props中添加optcreated
1354858-20190201161114156-1682158479.png

ok,所有的就改完了,效果如图所示:
1354858-20190201161740481-1388464717.png

以下附源码:

<template>
  <div
    class="el-select"
    v-clickoutside="handleClose">
    <div
      class="el-select__tags"
      :class="{'noTags':noTag}"
      v-if="multiple"
      @click.stop="toggleMenu"
      ref="tags"
      :style="{ 'max-width': inputWidth - 32 + 'px' }">
      <transition-group @after-leave="resetInputHeight">
        <el-tag
          v-if="!noTag"
          v-for="item in selected"
          :key="getValueKey(item)"
          closable
          :hit="item.hitState"
          type="primary"
          @close="deleteTag($event, item)"
          close-transition>
          <span class="el-select__tags-text">{
    { item.currentLabel }}</span>
        </el-tag>
      </transition-group>

        <el-popover
             ref="textTooltip"
             placement="top-start"
             width="200"
             trigger="hover"
             :content="currentSelLabel">
        </el-popover>
        <span v-if="noTag" class="noTagSpan"
              @mouseenter="showSpanTooltip($event)" @mouseleave="hiddenSpanTooltip($event)">
            {
    {currentSelLabel}}
        </span>
      <input
        type
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值