el-select内容过长和el-option内容过长解决办法

在工作中遇见了一个el-select的选中值过长和e-option的值过长得问题，在页面内有多个select时，可以选择两个办法来实现解决这个问题。

<template>
    <el-select 
        v-model="value" 
        multiple 
        filterable 
        allow-create 
        default-first-option 
        placeholder="请选择文章标签"> 
       <el-option 
           v-for="item in options" 
           :key="item.value" 
           :label="item.label" 
           :value="item.value"> 
       </el-option> </el-select>
       </template> 
       <script> export default { 
           data() { 
               return { 
                   options: [
                   { value: 'HTML', label: 'HTMLllllllllllllllllllllllllllll' }, 
                   { value: 'CSS', label: 'CSS' }, 
                   { value: 'JavaScript', label: 'JavaScript' }],
                   value: [] } 
                   } 
               } 
       </script>

当单选情况下

1.采用修改css样式的方法，注意：尽量为修改的样式的el-select添加上自己的类名进行嵌套，不然会造成对页面内其他的选择框的影响。这种方法并不能规定出具体显示字数，可以规定长度
2.采用修改v-bind绑定的属性的方法。
使用js解决这个问题的方法有很多，列举我所想到的几种：
(1)为el-select的v-model写一个computed进行监听的属性，这样只更改input框内的长度。
(2)在method内写一个过滤的方法，例如使用if语句进行字数长度的简单判断并把不合格的字进行更改。例如我们写的方法名为numLenCheck()方法，在el-option中使用:label="numLenCheck(item.label)",在没设置value的情况下el-option和el-select的长度都会根据你的函数改变，在设置的情况下只有el-option的会改变。

当多选情况下

莫慌，可以在computed内写一个get函数进行处理数据

computed{
    //被v-model新绑定的值
    newmodel{
        get(){
            let list=[]
            //对原数组进行计算
            this.oldModel.foreach(item=>{
                list.push(进行每个原被绑定数组内每个值的处理)
            })
            return list
       }
   }
}