【预生产环境】海运出货操作，代理商枚举值下拉框太长，需要调整下

src/views/ecw/box/shippingSea/nodePage/common/supplierOutSelect.vue

 <template>
   <div>
-    <el-select
-    filterable
-    :value="value === 0 ? undefined : value"
-    @change="change"
-    v-bind="$attrs"
-    clearable
-  >
-    <el-option
-      v-for="supplier in getSuppliers"
-      :key="supplier.id"
-      :label="$t('公司名称:')+$l(supplier, 'company')+$t('，地址:')+supplier.externalBackVO.receiveAddress+$t('，邮箱:')+supplier.externalBackVO.receiveEmail+$t('，品名:')+supplier.externalBackVO.goodName+$t('，From M No:')+supplier.externalBackVO
-.fromNo+$t('，BA No:')+supplier.externalBackVO
-.baNo"
-      :value="supplier.id"
-    ></el-option>
-  </el-select>
+    <el-select filterable :value="value === 0 ? undefined : value" @change="change" v-bind="$attrs" clearable>
+      <el-option v-for="supplier in getSuppliers" :key="supplier.id" :label="$t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo" :value="supplier.id" style="width: 600px">
+        <el-tooltip class="item" effect="dark" placement="top">
+          <div slot="content">
+            <span>{{ $t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo }}</span>
+          </div>
+          <div class="iclass">{{ $t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo }}</div>
+        </el-tooltip>
+      </el-option>
+    </el-select>
   </div>
-  
 </template>
 
 <script>
@@ -25,7 +18,7 @@
  * 供应商
  */
 export default {
-  name: "supplierSelect",
+  name: 'supplierSelect',
   props: {
     companyType: String,
     value: Number,
@@ -33,38 +26,40 @@ export default {
     areaType: {
       type: Number,
       default: 0
-    },
+    }
   },
   model: {
-    prop: "value",
-    event: "change",
+    prop: 'value',
+    event: 'change'
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     getSuppliers() {
-      let allSupplier = this.allSupplier.filter(
-        (item) => item.areaType == this.areaType
-      );
-      allSupplier.forEach(map=>{
-        map.externalBackVO.receiveAddress = map.externalBackVO.receiveAddress?map.externalBackVO.receiveAddress: ''
-        map.externalBackVO.receiveEmail = map.externalBackVO.receiveEmail?map.externalBackVO.receiveEmail:''
-        map.externalBackVO.goodName = map.externalBackVO.goodName?map.externalBackVO.goodName:''
-        map.externalBackVO.fromNo = map.externalBackVO.fromNo?map.externalBackVO.fromNo:''
-        map.externalBackVO.baNo = map.externalBackVO.baNo?map.externalBackVO.baNo:''
+      let allSupplier = this.allSupplier.filter((item) => item.areaType == this.areaType)
+      allSupplier.forEach((map) => {
+        map.externalBackVO.receiveAddress = map.externalBackVO.receiveAddress ? map.externalBackVO.receiveAddress : ''
+        map.externalBackVO.receiveEmail = map.externalBackVO.receiveEmail ? map.externalBackVO.receiveEmail : ''
+        map.externalBackVO.goodName = map.externalBackVO.goodName ? map.externalBackVO.goodName : ''
+        map.externalBackVO.fromNo = map.externalBackVO.fromNo ? map.externalBackVO.fromNo : ''
+        map.externalBackVO.baNo = map.externalBackVO.baNo ? map.externalBackVO.baNo : ''
       })
-      if(this.areaType == 1 || !this.companyType) return allSupplier;
-      return allSupplier.filter((item) =>
-        item.companyTypes.includes(this.companyType)
-      );
-     
-    },
+      if (this.areaType == 1 || !this.companyType) return allSupplier
+      return allSupplier.filter((item) => item.companyTypes.includes(this.companyType))
+    }
   },
   methods: {
     change(val) {
-      this.$emit("change", val);
-    },
-  },
-};
+      this.$emit('change', val)
+    }
+  }
+}
 </script>
+<style scoped>
+.iclass {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>