項目中經常用到<el-select>標簽，但是element的select有一個樣式上的小問題，就是前端經常需要對輸入框/選擇框的樣式寬度做限制以保證頁面整潔，布局清晰。但是如果選項(option)的長度在大于選擇框的情況時，就會出現以下問題

image.png

其實這個問題可以直接通過修改樣式就可以解決了，只需要在el-select標簽上添加一個class，并修改el-tag與el-tag--info的樣式就可以了，具體如下

// idt-multiple-select 為el-select上的className
/deep/ .idt-multiple-select {
  .el-tag {
    height: auto;
    max-width: 100%;
  }
  .el-tag--info {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

但是我真的很懶，項目至少有6-7處需要用到這個樣式，直接復制粘貼又影響我的逼格。所以我索性就修改了一下，對el-select進行二次封裝，主要代碼如下：

<template>
  <div>
    <el-select :placeholder="placeholder"
               :value="value"
               :size="size"
               multiple
               class="idt-multiple-select"
               @input="change($event)">
      <el-option v-for="item in optionsList"
                 :key="item[id]"
                 :label="item[name]"
                 :value="item[id]"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      default: 'name',
      type: String
    },
    id: {
      default: 'id',
      type: String
    },
    placeholder: {
      default: '請選擇',
      type: String
    },
    size: {
      default: 'small',
      type: String
    },
    filterable: {
      default: false,
      type: Boolean
    },
    value: {
      default: () => {
        return []
      },
      type: Array
    },
    optionsList: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  methods: {
    change: function(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .idt-multiple-select {
  .el-tag {
    height: auto;
    max-width: 100%;
  }
  .el-tag--info {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}
</style>

在外層使用的時候，只需要引入該組件，傳部分需要改動的值即可

<idt-multiple-select v-model="formData.projectIdList"
                                 :filterable="true"
                                 :options-list="projectTagList"></idt-multiple-select>

效果如下：

image.png

當然這并不是完整的，el-select還有很多方法這里就沒有加進去，以后加進去也是可以的，但是目前項目用不上，而且我真的很懶，手上還有很多其他的工作需要趕，我在這里就不補全了。以后哪天有需要會回來更新的~