Vue二次封装ElementUI的select

项目中经常用到<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还有很多方法这里就没有加进去，以后加进去也是可以的，但是目前项目用不上，而且我真的很懒，手上还有很多其他的工作需要赶，我在这里就不补全了。以后哪天有需要会回来更新的~