在vue中实现树形结构的表格，以及对数据结构的处理
需求：有一些告警数据，如果他们的计划编码相同则实现折叠效果，单击某行数据可以进行关闭，状态发生改变，关闭以后按钮禁用。
实现效果：目前所有告警消息都被关闭，如果未被关闭则可以进行关闭
实现代码：
关闭
已关闭
需要处理的就是表格数据结构，如果后端没有对数据结构进行处理，那我们就要自己处理了
假设这是后端返回的数据结构：
[
{
"alarmId": 1,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 100,
"itemCode": "CP.021.22.01",
"itemName": "Sovbond TBBS-80GE（水粉色）",
"diffValue": 3,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 2,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 100,
"itemCode": "CP.021.22.01",
"itemName": "Sovbond TBBS-80GE（水粉色）",
"diffValue": 2,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 3,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 5,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 4,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 4,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 5,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 5,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 6,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 101,
"itemCode": "CP.021.24.01",
"itemName": "Sovbond TBBS-80GS",
"diffValue": 2,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 7,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 103,
"itemCode": "CP.023.21.01",
"itemName": "Sovbond OTOS-80GE",
"diffValue": 6,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 8,
"planId": 15,
"planCode": "生产计划1",
"itemId": 732,
"itemCode": "CP.02",
"itemName": "美年达",
"diffValue": 7,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
}
]而我们需要得到的数据结构是这样的，将planId相同的做成折叠效果，实现方式在上述代码中getList方法中就已经实现了。
[
{
"alarmId": 1,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 100,
"itemCode": "CP.021.22.01",
"itemName": "Sovbond TBBS-80GE（水粉色）",
"diffValue": 3,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107",
"children": [
{
"alarmId": 2,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 100,
"itemCode": "CP.021.22.01",
"itemName": "Sovbond TBBS-80GE（水粉色）",
"diffValue": 2,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 6,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 101,
"itemCode": "CP.021.24.01",
"itemName": "Sovbond TBBS-80GS",
"diffValue": 2,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 7,
"planId": 2,
"planCode": "DDDDDD1",
"itemId": 103,
"itemCode": "CP.023.21.01",
"itemName": "Sovbond OTOS-80GE",
"diffValue": 6,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
}
]
},
{
"alarmId": 3,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 5,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107",
"children": [
{
"alarmId": 4,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 4,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
},
{
"alarmId": 5,
"planId": 17,
"planCode": "生产计划2",
"itemId": 108,
"itemCode": "CP.040.21.01",
"itemName": "Sovbond TMTM-80GE",
"diffValue": 5,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107"
}
]
},
{
"alarmId": 8,
"planId": 15,
"planCode": "生产计划1",
"itemId": 732,
"itemCode": "CP.02",
"itemName": "美年达",
"diffValue": 7,
"dealStatus": 1,
"createTime": "2024-01-11",
"shutTime": "2024-01-12",
"clientIp": "192.168.90.107",
"children": []
}
]需要值得注意的时候，你已关闭按钮在被关闭时需要使用v-show而不是v-if
因为：
已关闭按钮的 disabled 属性是通过 v-if 条件来控制的。这样的实现方式可能会导致 Vue 在渲染时忽略 disabled 属性，因为在 v-if 的条件下，即使按钮处于已关闭状态，它仍然存在于 DOM 中，只是在用户界面上被隐藏了。
解决这个问题的一种方式是使用 v-show 指令而不是 v-if 来控制按钮的显示与隐藏。v-show 不会在元素隐藏时将其从 DOM 中移除，而是使用 CSS 样式来控制显示和隐藏，这样在已关闭状态下，按钮依然存在于 DOM 中，但用户无法与其交互。
或者将关闭按钮写成这样：
已关闭
所以v-show和v-if有时候达到的效果可能一样，但也不能乱使用，更何况有时候产生的效果是完全不一样的。