自动循环出列表

src/components/brokerage/index.vue

@@ -3,37 +3,21 @@
   <div class="brokerage">
 
     <el-tabs v-model="type" type="card" style="background: #fff; padding-top: 10px">
-      <el-tab-pane label="顾问" name="1">
-        <ul class="tab-content">
 
-          <li class="brokerage-item">
-            {{filterName(1, 'BROKERAGE_COURSE_TYPE')}}
-            <!--<el-table :data="">
-              <el-table-column prop="id" label="ID"></el-table-column>
-            </el-table>-->
-          </li>
-
-          <li class="brokerage-item">
-            {{filterName(2, 'BROKERAGE_COURSE_TYPE')}}
-            <!--<el-table :data="">
-              <el-table-column prop="id" label="ID"></el-table-column>
-            </el-table>-->
-          </li>
+      <el-tab-pane v-for="item1 in list" :key="item1.label" :label="item1.label" :name="item1.value">
+        <ul class="tab-content">
 
-          <li class="brokerage-item">
-            {{filterName(3, 'BROKERAGE_COURSE_TYPE')}}
-            <!--<el-table :data="">
-              <el-table-column prop="id" label="ID"></el-table-column>
+          <li v-for="item2 in item1.children" class="brokerage-item">
+            {{filterName(item2.value, 'BROKERAGE_COURSE_TYPE')}}
+            <el-button type="success" plain>新增</el-button>
+            <!--<el-table>
+              <el-table-column label="ID"></el-table-column>
             </el-table>-->
           </li>
 
         </ul>
       </el-tab-pane>
-      <el-tab-pane label="主管" name="2">
-        <div class="tab-content">
-          敢发广告
-        </div>
-      </el-tab-pane>
+
     </el-tabs>
 
   </div>
@@ -50,7 +34,39 @@
       return {
         type: '1',
         BROKERAGE_COURSE_TYPE: BROKERAGE_COURSE_TYPE,
-
+        list: [{
+          label: '顾问',
+          value: '1',
+          children: [{
+            label: '试听课来源-转年课业绩',
+            value: '1',
+            data: []
+          }, {
+            label: '月课、季课来源-转年课业绩',
+            value: '2',
+            data: []
+          }, {
+            label: '年课来源 - 转两年课业绩提点配置',
+            value: '3',
+            data: []
+          }]
+        }, {
+          label: '主管',
+          value: '2',
+          children: [{
+            label: '主管业绩提点',
+            value: '4',
+            data: []
+          }, {
+            label: '主管转化率系数（试听课）',
+            value: '5',
+            data: []
+          }, {
+            label: '主管转化率系数（月课、季课）',
+            value: '6',
+            data: []
+          }]
+        }]
       }
     },
     mounted() {
@@ -65,7 +81,22 @@
 
       getData() {
         getBrokerageApi().then(res => {
-          console.log(res)
+          if (res.list && res.list.length) {
+            res.list.forEach(val1 => {
+              if (val1 && val1.length) {
+                var idx1 = this.list.findIndex(item1 => {
+                  return item1.value == val1[0].sale_type
+                })
+                this.list[idx1].children.forEach(val2 => {
+                  var idx2 = this.list[idx1].children.findIndex(item2 => {
+                    return item2.value == val1[0].course_type
+                  })
+                  this.list[idx1].children[idx2].data = val1;
+                })
+              }
+            })
+            console.log(this.list)
+          }
         })
       }
     }