反馈名字过长时省略

src/containers/Dashboard/CustomerFeedback/CustomerFeedback.vue

@@ -10,14 +10,21 @@
         <span class="red">{{count}}条</span>
       </div>
     </div>
-    <div class="CustomerFeedback-List">
+    <div
+      class="CustomerFeedback-List"
+      v-if="show"
+      :style="`width:${width}px`"
+    >
       <div
         class="CustomerFeedback-Item"
         v-for="(item, index) in feedbackList"
         :key="index"
       >
         <span class="CustomerFeedback-ItemNum">{{item.count}}条</span>
-        <span class="CustomerFeedback-ItemName">{{item.areaName}}</span>
+        <span
+          class="CustomerFeedback-ItemName"
+          :title="item.areaName"
+        >{{item.areaName}}</span>
       </div>
     </div>
   </div>
@@ -31,9 +38,21 @@ export default {
   computed: {
     ...mapGetters('Dashboard/customerFeedback', ['feedbackList', 'count']),
   },
+  data() {
+    return {
+      show: false,
+    };
+  },
   created() {
     this.initData();
   },
+  mounted() {
+    let boxDom = document.querySelector('.CustomerFeedback');
+    let listDom = document.querySelector('.CustomerFeedback-List');
+    this.width = boxDom.clientWidth;
+
+    this.show = true;
+  },
   methods: {
     ...mapActions('Dashboard/customerFeedback', ['getFeedbackList']),
     initData() {
@@ -87,7 +106,11 @@ export default {
       flex: 1;
       padding-right: 20px;
       line-height: 28px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+
   }
 }
 @media screen and (max-width: $bigScreenWidth) {