From a62dedb98177897326ff084c62e8a418182e1e2c Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 3 Jun 2021 15:39:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=E5=A4=9A=E9=80=89=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/widget/DeWidget/DeSelect.vue   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 7037fae96f..b3b131cdf9 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -1,6 +1,15 @@
 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :clearable="!options.attrs.multiple" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
+  <el-select
+    v-if="options!== null && options.attrs!==null"
+    ref="deSelect"
+    v-model="options.value"
+    :collapse-tags="showNumber"
+    :clearable="!options.attrs.multiple"
+    :multiple="options.attrs.multiple"
+    :placeholder="options.attrs.placeholder"
+    @change="changeValue"
+  >
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -29,7 +38,8 @@ export default {
     return {
       options: null,
       //   operator: 'eq',
-      values: null
+      values: null,
+      showNumber: false
     }
   },
   computed: {
@@ -59,6 +69,14 @@ export default {
     changeValue(value) {
       this.setCondition()
       // this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
+      this.$nextTick(() => {
+        const kids = this.$refs.deSelect.$refs.tags.children[0].children
+        let contentWidth = 0
+        kids.forEach(kid => {
+          contentWidth += kid.offsetWidth
+        })
+        this.showNumber = contentWidth > (this.$refs.deSelect.$refs.tags.clientWidth * 0.7)
+      })
     },
 
     setCondition() {