用户组列表页的路由列只显示5条，超过则显示更多

web/src/pages/group/List.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <el-card>
-
       <el-form :inline="true">
         <el-form-item>
           <el-button
@@ -65,8 +64,13 @@
             label="路由包含"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_include.length > 5">...</el-row>            
+            <div v-if="scope.row.route_include.length > readMinRows">
+              <div v-if="readMore[`ri_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`ri_${ scope.row.id }`)">{{ readMore[`ri_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>            
           </template>
         </el-table-column>
 
@@ -75,8 +79,13 @@
             label="路由排除"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_exclude.length > 5">...</el-row>
+            <div v-if="scope.row.route_exclude.length > readMinRows">
+              <div v-if="readMore[`re_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`re_${ scope.row.id }`)">{{ readMore[`re_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
 
@@ -85,10 +94,17 @@
             label="LINK-ACL"
             min-width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.link_acl.slice(0, 5)" :key="inx">
+            <el-row v-for="(item,inx) in scope.row.link_acl.slice(0, readMinRows)" :key="inx">
               {{ item.action }} => {{ item.val }} : {{ item.port }}
             </el-row>
-            <el-row v-if="scope.row.link_acl.length > 5">...</el-row>
+            <div v-if="scope.row.link_acl.length > readMinRows">
+              <div v-if="readMore[`la_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.link_acl.slice(readMinRows)" :key="inx">
+                  {{ item.action }} => {{ item.val }} : {{ item.port }}
+                </el-row>
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`la_${ scope.row.id }`)">{{ readMore[`la_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
 
@@ -322,6 +338,7 @@
             <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
             <el-button @click="disVisible">取消</el-button>
             </el-form-item>
+          </el-tabs>
         </el-form> 
     </el-dialog>
 
@@ -349,7 +366,8 @@ export default {
       tableData: [],
       count: 10,
       activeTab : "general",
-
+      readMore: {},
+      readMinRows : 5,
       ruleForm: {
         bandwidth: 0,
         status: 1,
@@ -477,9 +495,15 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
+    },
+    toggleMore(id) {
+      if (this.readMore[id]) {
+        this.$set(this.readMore, id, false);
+      } else {
+        this.$set(this.readMore, id, true);
       }
     },
-
+  },
 }
 </script>
 

web/src/pages/user/Policy.vue

@@ -50,21 +50,31 @@
 
         <el-table-column
             prop="route_include"
-            label="包含路由"
+            label="路由包含"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_include.length > 5">...</el-row>
+            <div v-if="scope.row.route_include.length > readMinRows">
+              <div v-if="readMore[`ri_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`ri_${ scope.row.id }`)">{{ readMore[`ri_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>            
           </template>
         </el-table-column>
 
         <el-table-column
             prop="route_exclude"
-            label="排除路由"
+            label="路由排除"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_exclude.length > 5">...</el-row>
+            <div v-if="scope.row.route_exclude.length > readMinRows">
+              <div v-if="readMore[`re_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`re_${ scope.row.id }`)">{{ readMore[`re_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
         <el-table-column
@@ -261,6 +271,8 @@ export default {
       tableData: [],
       count: 10,
       activeTab : "general",
+      readMore: {},
+      readMinRows : 5,      
       ruleForm: {
         bandwidth: 0,
         status: 1,
@@ -379,8 +391,15 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
+    },
+    toggleMore(id) {
+      if (this.readMore[id]) {
+        this.$set(this.readMore, id, false);
+      } else {
+        this.$set(this.readMore, id, true);
       }
     },    
+  },
 
 }
 </script>