vue.js - 用vue使用原生table标签如何实现图中效果？
最终效果如下：
数据如下：
[
{
"label": "CPU信息",
"result": "",
"desc": "",
"resultStatus": "normal",
"children": [
{
"label": "CPU使用率",
"result": "3.98%",
"desc": "",
"resultStatus": "normal",
"id": "id_4"
},
{
"label": "CPU核数",
"result": "4",
"desc": "",
"resultStatus": "normal",
"id": "id_5"
}
],
"id": "id_1",
},
{
"label": "内存信息",
"result": "",
"desc": "",
"resultStatus": "abnormal",
"children": [
{
"label": "总内存",
"result": "7.57 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_6"
},
{
"label": "可用内存",
"result": "177 MiB",
"desc": "",
"resultStatus": "normal",
"id": "id_7"
},
{
"label": "已用内存",
"result": "7.4 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_8"
},
{
"label": "内存使用率",
"result": "97.7%",
"desc": "",
"resultStatus": "abnormal",
"id": "id_9"
}
],
"id": "id_2"
},
{
"label": "磁盘信息",
"result": "",
"desc": "",
"resultStatus": "normal",
"children": [
{
"label": [
"文件系统：/dev/dm-0",
"挂载点：/"
],
"result": [],
"desc": [],
"resultStatus": "normal",
"children": [
{
"label": "容量",
"result": "70.0 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_12"
},
{
"label": "已用",
"result": "20.0 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_13"
},
{
"label": "可用",
"result": "50.0 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_14"
},
{
"label": "使用率",
"result": "29.0%",
"desc": "",
"resultStatus": "normal",
"id": "id_15"
}
],
"id": "id_11"
},
{
"label": [
"文件系统：/dev/dm-2",
"挂载点：/home"
],
"result": [],
"desc": [],
"resultStatus": "normal",
"children": [
{
"label": "容量",
"result": "53.0 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_17"
},
{
"label": "已用",
"result": "1.64 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_18"
},
{
"label": "可用",
"result": "51.4 GiB",
"desc": "",
"resultStatus": "normal",
"id": "id_19"
},
{
"label": "使用率",
"result": "3%",
"desc": "",
"resultStatus": "normal",
"id": "id_20"
}
],
"id": "id_16"
},
{
"label": [
"文件系统：/dev/sda1",
"挂载点：/boot"
],
"result": [],
"desc": [],
"resultStatus": "normal",
"children": [
{
"label": "容量",
"result": "1014 MiB",
"desc": "",
"resultStatus": "normal",
"id": "id_22"
},
{
"label": "已用",
"result": "255 MiB",
"desc": "",
"resultStatus": "normal",
"id": "id_23"
},
{
"label": "可用",
"result": "759 MiB",
"desc": "",
"resultStatus": "normal",
"id": "id_24"
},
{
"label": "使用率",
"result": "25%",
"desc": "",
"resultStatus": "normal",
"id": "id_25"
}
],
"id": "id_21"
}
],
"id": "id_3"
}
]难点：表格有多列需合并多行，或者不合并
共有1个答案
<template>
<table class="inspection-table">
<thead>
<tr>
<th>巡检项</th>
<th>巡检内容</th>
<th>巡检结果</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<template v-for="section in tableData" :key="section.id">
<template v-for="(item, itemIndex) in section.children" :key="item.id">
<template v-if="item.children">
<tr v-for="(child, childIndex) in item.children" :key="child.id">
<td v-if="itemIndex === 0 && childIndex === 0" :rowspan="getTotalRows(section)" class="parent-row">
{{ section.label }}
</td>
<td v-if="childIndex === 0" :rowspan="item.children.length" class="disk-title">
<template v-if="Array.isArray(item.label)">
<div v-for="label in item.label" :key="label">{{ label }}</div>
</template>
<template v-else>
{{ item.label }}
</template>
</td>
<td>{{ child.label }}: {{ child.result }}</td>
<td :class="['status', child.resultStatus]">
{{ child.resultStatus === 'normal' ? '正常' : '异常' }}
</td>
</tr>
</template>
<tr v-else>
<td v-if="itemIndex === 0" :rowspan="getTotalRows(section)" class="parent-row">
{{ section.label }}
</td>
<td>{{ item.label }}</td>
<td>{{ item.result }}</td>
<td :class="['status', item.resultStatus]">
{{ item.resultStatus === 'normal' ? '正常' : '异常' }}
</td>
</tr>
</template>
</template>
</tbody>
</table>
</template>
data(){
return {
tableData: [... ] // 表格数据 省略
}}
methods: {
// 计算每个section的总行数
getTotalRows(section) {
return section.children.reduce((sum, item) => {
return sum + (item.children ? item.children.length : 1);
}, 0);
}}
-
有人知道ElementUI这种换肤动画效果是怎么实现的吗？是什么原理呢？ 原地址在这：https://element-plus.org/zh-CN/component/overview.html
-
Element-UI table reserve-selection 如何生效? 我的在线代码 第一页选中了 1,2,3条 此时切换到第二页再切回来,为什么还是没有选中? 是我理解有问题吗? https://codepen.io/firstblood93/pen/vYMOeyN
-
本文向大家介绍如何在Vue.JS中使用图标组件，包括了如何在Vue.JS中使用图标组件的使用技巧和注意事项，需要的朋友参考一下 原文链接：https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译，并从React开发者的角度简单地做了一些解读。 此文不包含字体图标和SVG sprite。仅在此讨论允许用
-
实现下面图中效果,？
-
本文向大家介绍使用原生JS实现弹出层特效，包括了使用原生JS实现弹出层特效的使用技巧和注意事项，需要的朋友参考一下 创建遮罩层 新建弹出层 调节弹层位置 屏幕滚动事件时调整位置 完整代码
-
本文向大家介绍原生JS实现图片翻书效果，包括了原生JS实现图片翻书效果的使用技巧和注意事项，需要的朋友参考一下 下面给大家分享基于原生js实现的图片翻书效果，具体代码如下所示： 以上所述是小编给大家介绍的原生JS实现图片翻书效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍vue实现标签云效果的方法详解，包括了vue实现标签云效果的方法详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现标签云效果的方法。分享给大家供大家参考，具体如下： 闲扯两句 最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标签数量较多时操作a
-
自从Facebook推出了标签，我就一直有兴趣了解更多关于它们的信息。有没有人能告诉我跟踪标签的方向，就像推特允许我们通过API获取标签数据一样。我可以数一数被提及的次数、用户名和推文。Facebook有没有推出类似的产品？我在网上找不到任何文档。