image.png
<template>
<div class="tr_table">
<div class="tr_header" v-for="(item,i) of tablehead" :key="i">{{item}}</div>
<div class="tr_body" v-for="(tab,j) of tabledata" :key="j">
<div class="tr_head" v-for="(bt,k,p) of tablehead" :key="k">
<div class="l_tree_branch3" v-if="p==1&&tab.name_show"></div>
<div class="l_tree_branch3" v-if="p==2&&tab.ip_show"></div>
<div class="tree_branch" :title="tab[k]&&tab[k].length>10?tab[k]:''">{{tab[k]}}</div>
<!-- <span class="iconfont" v-html="tab[k]"></span> -->
<div
class="tree_icon iconfont"
@click="togName(tab)"
v-if="p==0&&tab.name_child"
>{{tab.name_show?'':''}}</div>
<div
class="tree_icon iconfont"
@click="togIP(tab)"
v-if="p==1&&tab.ip_child"
>{{tab.ip_show?'':''}}</div>
<div class="l_tree_branch4" v-if="p==1&&tab.ip_show"></div>
</div>
<!-- 第1行带ip_show的 -->
<div class="tr_ip" v-if="tab.ip_child" v-show="tab.ip_show">
<div class="tr_head" v-for="(bt,k,q) of tablehead" :key="q">
<div class="l_tree_branch5" v-if="q==1&&tab.name_show"></div>
<div class="l_tree_branch3" v-if="q==2&&tab.ip_show"></div>
<div class="tree_branch">{{tab.ip_child[k]}}</div>
</div>
</div>
<!-- 第1行带name_show -->
<div class="tr_name" v-if="tab.name_child" v-show="tab.name_show">
<div class="tr_name_wapi" v-for="(n_tab,m) of tab.name_child" :key="m">
<div class="tr_head" v-for="(bt,k,p) of tablehead" :key="k">
<div class="l_tree_branch5" v-if="p==1&&tab.name_show"></div>
<div class="l_tree_branch3" v-if="p==1&&tab.name_show"></div>
<div class="l_tree_branch3" v-if="p==2&&n_tab.ip_show"></div>
<div class="tree_branch">{{n_tab[k]}}</div>
<div
class="tree_icon iconfont"
@click="togIP(n_tab)"
v-if="p==1&&n_tab.ip_child"
>{{n_tab.ip_show?'':''}}</div>
<div class="l_tree_branch4" v-if="p==1&&n_tab.ip_show"></div>
</div>
<!-- 第2行带name_show -->
<div class="tr_ip" v-if="n_tab.ip_child" v-show="n_tab.ip_show">
<div class="tr_head" v-for="(bt,k,q) of tablehead" :key="q">
<div class="l_tree_branch5" v-if="q==1&&tab.name_child.length-1!=m"></div>
<div class="l_tree_branch3" v-if="q==2&&n_tab.ip_show"></div>
<div class="tree_branch">{{n_tab.ip_child[k]}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tablehead: {
name: "子域名",
ip: "企业ip",
port: "企业开放端口",
state: "状态",
siteName: "网站名称"
},
tabledata: [
{
name: "子域名0",
ip: 5550,
port: 8080,
state: 0,
name_child: [
{ ip: 5551, port: 8080, ip_child: { port: 9095 }, ip_show: 1 },
{ ip: 5552, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 5553, port: 8080 },
{ ip: 5554, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 5555, port: 8080, ip_child: { port: 9095 }, ip_show: 0 }
],
name_show: 1,
siteName: "小红帽"
},
{
name: "子域名1",
ip: "5555",
port: 8080,
state: 0,
name_child: [
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 5556, port: 8080 },
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 }
],
name_show: 0,
siteName: "小红帽"
},
{
name: "子域名2",
ip: 4444,
port: 9090,
state: "1",
ip_child: { port: 9095 },
ip_show: 0,
siteName: "小红岛"
},
{
name: "子域名3",
ip: 5555,
port: 8080,
name_child: [
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 9999, port: 8080, ip_child: { port: 9097 }, ip_show: 0 }
],
name_show: 0,
siteName: "小红书"
},
{
name: "子域名4",
ip: 4444,
port: 9090,
ip_child: { port: 9095 },
ip_show: 0,
name_child: [
{ ip: 5556, port: 8080, ip_child: { port: 9095 }, ip_show: 0 },
{ ip: 9999, port: 8080, ip_child: { port: 9097 }, ip_show: 0 }
],
name_show: 0,
siteName: "小红参"
}
]
};
},
methods: {
togName(tab) {
tab.name_show = tab.name_show ? 0 : 1;
},
togIP(tab) {
tab.ip_show = tab.ip_show ? 0 : 1;
}
}
};
</script>
<style lang="scss" scoped>
.tr_table {
width: 98%;
padding-left: 1%;
.tree_icon {
position: absolute;
cursor: pointer;
margin-left: 132px;
color: #409eff;
z-index: 50;
height: 10px;
width: 14px;
line-height: 12px;
background-color: #fffcfc;
margin-top: 6px;
}
.tr_body:nth-child(2n) {
background-color: #fffcfc;
// .tree_branch { background-color: #fffafa; }
}
.tr_body {
position: relative;
padding: 5px 0 8px;
font-size: 13px;
}
.tr_header {
font-weight: 700;
display: inline-block;
vertical-align: top;
width: 160px;
color: rgb(71, 69, 69);
font-size: 12px;
font-family: Avenir, Helvetica, Arial, sans-serif;
line-height: 23px;
}
.tr_head {
display: inline-block;
vertical-align: top;
width: 160px;
}
.tr_ip {
padding-top: 8px;
}
.tr_name_wapi {
padding: 5px 0;
}
.tree_branch {
z-index: 10;
position: absolute;
line-height: 24px;
max-width: 140px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//横线
.l_tree_branch3 {
width: 20px;
border-top: 1px dashed #999999;
position: absolute;
margin-top: 11px;
margin-left: -20px;
z-index: 16;
}
//第2个竖线
.l_tree_branch4 {
height: 18px;
margin-top: 17px;
width: 1px;
border-left: 1px dashed #999999;
position: absolute;
margin-left: 140px;
z-index: 15;
}
//第1个竖线
.l_tree_branch5 {
height: 23px;
width: 1px;
border-left: 1px dashed #999999;
position: absolute;
margin-top: -12px;
margin-left: -20px;
z-index: 15;
}
}
</style>
没有太仔细整理，遇到不同的样式再改，原理什么的都没问题
网友评论