mirror of https://github.com/bjdgyc/anylink.git
用户组列表页的路由列只显示5条，超过则显示更多
This commit is contained in:
lanrenwo
parent
7f1e769377
commit
4b36577b00
|
|
@ -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-if="scope.row.route_include.length > 5">...</el-row>
|
||||
<el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</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-if="scope.row.route_exclude.length > 5">...</el-row>
|
||||
<el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</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,7 +338,8 @@
|
|||
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||
<el-button @click="disVisible">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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-if="scope.row.route_include.length > 5">...</el-row>
|
||||
<el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</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-if="scope.row.route_exclude.length > 5">...</el-row>
|
||||
<el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</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,7 +391,14 @@ 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);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue