如何树形展示多层级数据(或者叫树形展示)（三）

最新推荐文章于 2024-07-29 21:03:44 发布

kielin

最新推荐文章于 2024-07-29 21:03:44 发布

阅读量2.5k

点赞数 2

分类专栏： java VUE 文章标签： vue tree d3 echarts table

本文链接：https://blog.csdn.net/kielin/article/details/90344864

版权

本文探讨了如何在Vue中实现树形展示多层级数据，包括使用panjiachen组件解决动态接口数据不显示的问题，以及通过computed属性解决加载显示问题。尽管面临挑战，如子组件的loading效果不一致，但最终实现了从table到tree的转换，并展示了实际效果。

摘要由CSDN通过智能技术生成

如何树形展示多层级数据(或者叫树形展示)（一）

如何树形展示多层级数据(或者叫树形展示)（二）

5. 最后是我最后选择的table转换为tree的实现，这里用到了panjiachen大佬的组件，里面稍做改动，中间也遇到一些问题，比如数据父子传递时，用静态的数据正常显示，但是用动态接口的数据后不能显示数据，后来换成computed属性解决了。以及还存在的问题是，我现在是每一次request的时候都会有一个loading的提示，response时消失，但是用这个子组件有时却不能每次都有效。

用于展示的数据：

const dataJson =[
	{
		"name": "bigdata",
		"children": [
			{
				"name": "search-web",
				"children": [
					{
						"appHealth": [
							{
								"avg": null,
								"95Line": null,
								"99Line": null,
								"failPercent": null,
								"errorTotal": "118"
							}
						],
						"monitorHealth": [
							{
								"id": "05e9cf50bf9d4be7acb291005420638d",
								"hostName": "prodbigdata-search-web005",
								"hostIp": "10.111.7.74",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "2.75",
								"diskValues": "11.0",
								"memValues": "28.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "324619d8066f4c00ba5675da5d82e8b0",
								"hostName": "prodbigdata-search-web006",
								"hostIp": "10.111.4.102",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "3.625",
								"diskValues": "11.0",
								"memValues": "28.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "4236044f24814a7485393855e5199bf5",
								"hostName": "prodbigdata-search-web009",
								"hostIp": "10.111.7.95",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "2.75",
								"diskValues": "11.0",
								"memValues": "28.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "95dc1b56ee274693b1f5a28c0a95358c",
								"hostName": "prodbigdata-search-web007",
								"hostIp": "10.111.4.128",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "3.0",
								"diskValues": "11.0",
								"memValues": "19.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "c2e768ebf76341ed876986517d3e5646",
								"hostName": "prodbigdata-search-web004",
								"hostIp": "10.111.4.101",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "3.5",
								"diskValues": "11.0",
								"memValues": "28.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "e4a72776b8ed49d0b6446537f799a44a",
								"hostName": "prodbigdata-search-web008",
								"hostIp": "10.111.4.130",
								"jobInfo": "生产环境",
								"serviceInfo": "search-web",
								"platForm": "bigdata",
								"cpuValues": "3.0",
								"diskValues": "11.0",
								"memValues": "28.0",
								"createTime": "2019-05-12 00:00:00"
							}
						]
					}
				],
				"status": 0
			},
			{
				"name": "xxn-search-service",
				"children": [
					{
						"appHealth": [
							{
								"avg": null,
								"95Line": null,
								"99Line": null,
								"failPercent": null,
								"errorTotal": "4"
							}
						],
						"monitorHealth": [
							{
								"id": "0fcc5e1ef6a1436ea20cd9dac02664a3",
								"hostName": "prodbigdata-xxn-search-service006",
								"hostIp": "10.111.4.84",
								"jobInfo": "生产环境",
								"serviceInfo": "xxn-search-service",
								"platForm": "bigdata",
								"cpuValues": "19.25",
								"diskValues": "17.0",
								"memValues": "70.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "1244fee0572e448e88b29214813aec45",
								"hostName": "prodbigdata-xxn-search-service004",
								"hostIp": "10.111.3.130",
								"jobInfo": "生产环境",
								"serviceInfo": "xxn-search-service",
								"platForm": "bigdata",
								"cpuValues": "18.0",
								"diskValues": "17.0",
								"memValues": "71.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "210517a77aa54817bd5228bbb93cdf42",
								"hostName": "prodbigdata-xxn-search-service005",
								"hostIp": "10.111.3.136",
								"jobInfo": "生产环境",
								"serviceInfo": "xxn-search-service",
								"platForm": "bigdata",
								"cpuValues": "11.0",
								"diskValues": "17.0",
								"memValues": "70.0",
								"createTime": "2019-05-12 00:00:00"
							},
							{
								"id": "3ca05eff93fe40a5ab5784c0411753ef",
								"hostName": "prodbigdata-xxn-search-service009",
								"hostIp": "10.111.4.129",
								"jobInfo": "生产环境",
								"serviceInfo": "xxn-search-service",
								"platForm": "bigdata",
								"cpuValues": "19.5",
								"diskValues": "16.0",
								"m