el-select样式修改

一、解决数据过长

效果如下：

 

代码如下：

1、el-select添加

 :popper-append-to-body="false" class="product-style"

2、el-option上添加

 :title="item.originalName"

作用是鼠标移上去显示全部文字

3、el-option里面添加

<span>{{ item.originalName }}</span>

作用能出现省略号

完整代码如下：

<el-select v-model="svo.original" filterable placeholder="请选择" :popper-append-to-body="false" class="product-style" style="width: 88%">
            <el-option
              v-for="item in originalList"
              :key="item.originalId"
              :label="item.originalName"
              :value="item.originalId" :title="item.originalName">
              <span>{{ item.originalName }}</span>
            </el-option>
          </el-select>

4、添加样式

.product-style /deep/ .el-scrollbar__view {
    width: 700px;
  }
  .product-style /deep/ .el-select-dropdown__item {
    width: 700px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

二、修改placeholder字体样式

修改前：

 添加样式：

::v-deep input::-webkit-input-placeholder {
            color: black;
          }
          ::v-deep input::-ms-input-placeholder {
            color: black;
          }

修改后:

三、修改el-select右侧的箭头

修改之前：

 样式代码：

::v-deep .el-select .el-icon-arrow-up:before {
            content: "◀";
            color: #666;
            font-size: 12px;
            margin-left: 5px;
            transition: transform 0.3s;
          }

修改之后：