解决分段器不渲染问题

src/project/saas/AppCooperationPropaganda/cooperationDetail.vue

@@ -66,7 +66,7 @@
 
       <div class="list_content">
         <div class="list_card">
-          <div class="tab">
+          <!-- <div class="tab">
             <u-subsection
               :list="subsection"
               mode="button"
@@ -74,26 +74,27 @@
               :current="subIndex"
               @change="changeSub"
             ></u-subsection>
-          </div>
+          </div> -->
 
-          <!-- <div class="tab" v-show="tabIndex == 0">
+          <div class="tab" v-show="update0">
             <u-subsection
-              :list="subsectionA"
+              :list="subsection0"
               mode="button"
               activeColor="#3c9cff"
-              :current="subIndexA"
-              @change="changeSubA"
+              :current="subIndex0"
+              @change="changeSub0"
             ></u-subsection>
           </div>
-          <div class="tab" v-show="tabIndex == 1">
+
+          <div class="tab" v-show="update1">
             <u-subsection
-              :list="subsectionB"
+              :list="subsection1"
               mode="button"
               activeColor="#3c9cff"
-              :current="subIndexB"
-              @change="changeSubB"
-              ></u-subsection>
-          </div> -->
+              :current="subIndex1"
+              @change="changeSub1"
+            ></u-subsection>
+          </div>
 
           <AiTable
             :data="tableData"
@@ -123,7 +124,9 @@ export default {
       tabs: ["成员统计", "居民群统计"],
       tabIndex: 0,
       pieEcharts: null,
-      subIndex: 0,
+      // subIndex: 0,
+      subIndex0: 0,
+      subIndex1: 0,
       tableData: [],
       createTime: "",
       id: "",
@@ -133,11 +136,24 @@ export default {
       currentClickTime: "",
       flag: true,
       detail: {},
-      subsection: [
+      // subsection: [
+      //   { name: "未执行" },
+      //   { name: "已执行" },
+      //   { name: "无法执行" },
+      // ],
+
+      subsection0: [
         { name: "未执行" },
         { name: "已执行" },
         { name: "无法执行" },
       ],
+      subsection1: [
+        { name: "未送达" },
+        { name: "已送达" },
+        { name: "无法送达" },
+      ],
+      update0: true,
+      update1: false,
     };
   },
   computed: {
@@ -162,6 +178,25 @@ export default {
   methods: {
     tabClick(index) {
       this.tabIndex = index;
+      if(this.tabIndex == 0) {
+          this.subsection = [
+          { name: "未执行" },
+          { name: "已执行" },
+          { name: "无法执行" },
+        ]
+        this.update0 = true
+        this.update1 = false
+        this.$forceUpdate()
+      } else if(this.tabIndex == 1) {
+          this.subsection = [
+          { name: "未送达" },
+          { name: "已送达" },
+          { name: "无法送达" },
+        ]
+        this.update0 = false
+        this.update1 = true
+        this.$forceUpdate()
+      }
       this.getStatistics();
     },
 
@@ -219,8 +254,16 @@ export default {
       }
     },
     // 切换分段器
-    changeSub(index) {
-      this.subIndex = index;
+    // changeSub(index) {
+    //   this.subIndex = index;
+    //   this.getStatistics();
+    // },
+    changeSub0(index) {
+      this.subIndex0 = index;
+      this.getStatistics();
+    },
+    changeSub1(index) {
+      this.subIndex1 = index;
       this.getStatistics();
     },
     // 获取数据
@@ -229,7 +272,7 @@ export default {
         .post(`/app/appmasssendingtask/detailStatistics`, null, {
           params: {
             type: this.tabIndex,
-            sendStatus: this.subIndex,
+            sendStatus: this.tabIndex==0? this.subIndex0: this.subIndex1,
             taskId: this.id,
             current: this.current,
           },
@@ -443,6 +486,14 @@ export default {
 
       .tab {
         margin-bottom: 34px;
+
+        ::v-deep .u-subsection uni-view{
+          background: #eeef !important;
+        }
+      }
+
+      .sub-select {
+
       }
     }
   }