devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

在vue中实现树形结构的表格，以及对数据结构的处理_vue树形表格

作者：秋刀鱼在做梦 | 2024-08-28 19:59:25

赞

踩

vue树形表格

需求：有一些告警数据，如果他们的计划编码相同则实现折叠效果，单击某行数据可以进行关闭，状态发生改变，关闭以后按钮禁用。

实现效果：目前所有告警消息都被关闭，如果未被关闭则可以进行关闭

实现代码：

  1. <!--物料管理 -->
  2. <template>
  3.   <div class="app-container">
  4.     <el-table
  5.       v-loading="loading"
  6.       :data="tableList"
  7.       row-key="alarmId"
  8.       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  9.     >
  10.       <el-table-column label="计划编码" prop="planCode" />
  11.       <el-table-column label="产品编码" prop="itemCode" />
  12.       <el-table-column label="产品名称" prop="itemName" />
  13.       <el-table-column label="缺少重量" prop="diffValue" />
  14.       <el-table-column label="关闭时间" prop="shutTime" />
  15.       <el-table-column fixed="right" label="操作" width="200">
  16.         <template slot-scope="scope">
  17.           <el-button
  18.             type="text"
  19.             size="small"
  20.             @click="close(scope.row)"
  21.             v-if="scope.row.dealStatus == 0"
  22.             >关闭</el-button
  23.           >
  24.           <el-button
  25.             type="text"
  26.             size="small"
  27.             v-show="scope.row.dealStatus == 1"
  28.             disabled
  29.             >已关闭</el-button
  30.           >
  31.         </template>
  32.       </el-table-column>
  33.     </el-table>
  34.     <pagination
  35.       v-show="total > 0"
  36.       :total="total"
  37.       :page.sync="queryParams.pageNum"
  38.       :limit.sync="queryParams.pageSize"
  39.       @pagination="getList"
  40.     />
  41.   </div>
  42. </template>
  43.  
  44. <script>
  45. import { alarmList, closeAlarm } from "../../../api/alarm/index";
  46. export default {
  47.   data() {
  48.     return {
  49.       queryParams: {
  50.         pageNum: 1,
  51.         pageSize: 10,
  52.       },
  53.       total: 0,
  54.       loading: false,
  55.       tableList: [],
  56.     };
  57.   },
  58.   created() {
  59.     this.getList();
  60.   },
  61.   methods: {
  62.     async close(row) {
  63.       console.log("参数", row);
  64.       const obj = { alarmId: row.alarmId, dealStatus: 1 };
  65.       const res = await closeAlarm(obj);
  66.       if (res) {
  67.         this.$notify({
  68.           title: "成功",
  69.           message: "该物料告警已被关闭",
  70.           type: "success",
  71.         });
  72.         console.log("关闭成功", res);
  73.         this.getList();
  74.       }
  75.     },
  76.     async getList() {
  77.       const res = await alarmList(this.queryParams);
  78.       if (res) {
  79.         console.log("告警记录", res);
  80.         const newTableList = [];
  81.         res.rows.forEach((item) => {
  82.           const existingItem = newTableList.find(
  83.             (newItem) => newItem.planCode === item.planCode
  84.           );
  85.  
  86.           if (existingItem) {
  87.             // 如果已存在相同 planCode 的项，将当前项添加到其 children 数组中
  88.             existingItem.children.push({
  89.               alarmId: item.alarmId,
  90.               planId: item.planId,
  91.               planCode: item.planCode,
  92.               itemId: item.itemId,
  93.               itemCode: item.itemCode,
  94.               itemName: item.itemName,
  95.               diffValue: item.diffValue,
  96.               dealStatus: item.dealStatus,
  97.               createTime: item.createTime,
  98.               shutTime: item.shutTime,
  99.               clientIp: item.clientIp,
  100.             });
  101.           } else {
  102.             // 如果不存在相同 planCode 的项，直接添加当前项
  103.             newTableList.push({
  104.               alarmId: item.alarmId,
  105.               planId: item.planId,
  106.               planCode: item.planCode,
  107.               itemId: item.itemId,
  108.               itemCode: item.itemCode,
  109.               itemName: item.itemName,
  110.               diffValue: item.diffValue,
  111.               dealStatus: item.dealStatus,
  112.               createTime: item.createTime,
  113.               shutTime: item.shutTime,
  114.               clientIp: item.clientIp,
  115.               children: [],
  116.             });
  117.           }
  118.         });
  119.         // console.log("告警记录数据结构", newTableList);
  120.         this.tableList = newTableList;
  121.       }
  122.     },
  123.   },
  124. };
  125. </script>
  126.  
  127. <style lang="scss" scoped>
  128. .callback-btn {
  129.   font-size: 16px;
  130.   font-weight: bold;
  131.   margin-top: 16px;
  132.   color: red;
  133. }
  134. </style>

需要处理的就是表格数据结构，如果后端没有对数据结构进行处理，那我们就要自己处理了

假设这是后端返回的数据结构：

  1. [
  2.     {
  3.         "alarmId": 1,
  4.         "planId": 2,
  5.         "planCode": "DDDDDD1",
  6.         "itemId": 100,
  7.         "itemCode": "CP.021.22.01",
  8.         "itemName": "Sovbond TBBS-80GE（水粉色）",
  9.         "diffValue": 3,
  10.         "dealStatus": 1,
  11.         "createTime": "2024-01-11",
  12.         "shutTime": "2024-01-12",
  13.         "clientIp": "192.168.90.107"
  14.     },
  15.     {
  16.         "alarmId": 2,
  17.         "planId": 2,
  18.         "planCode": "DDDDDD1",
  19.         "itemId": 100,
  20.         "itemCode": "CP.021.22.01",
  21.         "itemName": "Sovbond TBBS-80GE（水粉色）",
  22.         "diffValue": 2,
  23.         "dealStatus": 1,
  24.         "createTime": "2024-01-11",
  25.         "shutTime": "2024-01-12",
  26.         "clientIp": "192.168.90.107"
  27.     },
  28.     {
  29.         "alarmId": 3,
  30.         "planId": 17,
  31.         "planCode": "生产计划2",
  32.         "itemId": 108,
  33.         "itemCode": "CP.040.21.01",
  34.         "itemName": "Sovbond TMTM-80GE",
  35.         "diffValue": 5,
  36.         "dealStatus": 1,
  37.         "createTime": "2024-01-11",
  38.         "shutTime": "2024-01-12",
  39.         "clientIp": "192.168.90.107"
  40.     },
  41.     {
  42.         "alarmId": 4,
  43.         "planId": 17,
  44.         "planCode": "生产计划2",
  45.         "itemId": 108,
  46.         "itemCode": "CP.040.21.01",
  47.         "itemName": "Sovbond TMTM-80GE",
  48.         "diffValue": 4,
  49.         "dealStatus": 1,
  50.         "createTime": "2024-01-11",
  51.         "shutTime": "2024-01-12",
  52.         "clientIp": "192.168.90.107"
  53.     },
  54.     {
  55.         "alarmId": 5,
  56.         "planId": 17,
  57.         "planCode": "生产计划2",
  58.         "itemId": 108,
  59.         "itemCode": "CP.040.21.01",
  60.         "itemName": "Sovbond TMTM-80GE",
  61.         "diffValue": 5,
  62.         "dealStatus": 1,
  63.         "createTime": "2024-01-11",
  64.         "shutTime": "2024-01-12",
  65.         "clientIp": "192.168.90.107"
  66.     },
  67.     {
  68.         "alarmId": 6,
  69.         "planId": 2,
  70.         "planCode": "DDDDDD1",
  71.         "itemId": 101,
  72.         "itemCode": "CP.021.24.01",
  73.         "itemName": "Sovbond TBBS-80GS",
  74.         "diffValue": 2,
  75.         "dealStatus": 1,
  76.         "createTime": "2024-01-11",
  77.         "shutTime": "2024-01-12",
  78.         "clientIp": "192.168.90.107"
  79.     },
  80.     {
  81.         "alarmId": 7,
  82.         "planId": 2,
  83.         "planCode": "DDDDDD1",
  84.         "itemId": 103,
  85.         "itemCode": "CP.023.21.01",
  86.         "itemName": "Sovbond OTOS-80GE",
  87.         "diffValue": 6,
  88.         "dealStatus": 1,
  89.         "createTime": "2024-01-11",
  90.         "shutTime": "2024-01-12",
  91.         "clientIp": "192.168.90.107"
  92.     },
  93.     {
  94.         "alarmId": 8,
  95.         "planId": 15,
  96.         "planCode": "生产计划1",
  97.         "itemId": 732,
  98.         "itemCode": "CP.02",
  99.         "itemName": "美年达",
  100.         "diffValue": 7,
  101.         "dealStatus": 1,
  102.         "createTime": "2024-01-11",
  103.         "shutTime": "2024-01-12",
  104.         "clientIp": "192.168.90.107"
  105.     }
  106. ]

而我们需要得到的数据结构是这样的，将planId相同的做成折叠效果，实现方式在上述代码中getList方法中就已经实现了。

  1. [
  2.     {
  3.         "alarmId": 1,
  4.         "planId": 2,
  5.         "planCode": "DDDDDD1",
  6.         "itemId": 100,
  7.         "itemCode": "CP.021.22.01",
  8.         "itemName": "Sovbond TBBS-80GE（水粉色）",
  9.         "diffValue": 3,
  10.         "dealStatus": 1,
  11.         "createTime": "2024-01-11",
  12.         "shutTime": "2024-01-12",
  13.         "clientIp": "192.168.90.107",
  14.         "children": [
  15.             {
  16.                 "alarmId": 2,
  17.                 "planId": 2,
  18.                 "planCode": "DDDDDD1",
  19.                 "itemId": 100,
  20.                 "itemCode": "CP.021.22.01",
  21.                 "itemName": "Sovbond TBBS-80GE（水粉色）",
  22.                 "diffValue": 2,
  23.                 "dealStatus": 1,
  24.                 "createTime": "2024-01-11",
  25.                 "shutTime": "2024-01-12",
  26.                 "clientIp": "192.168.90.107"
  27.             },
  28.             {
  29.                 "alarmId": 6,
  30.                 "planId": 2,
  31.                 "planCode": "DDDDDD1",
  32.                 "itemId": 101,
  33.                 "itemCode": "CP.021.24.01",
  34.                 "itemName": "Sovbond TBBS-80GS",
  35.                 "diffValue": 2,
  36.                 "dealStatus": 1,
  37.                 "createTime": "2024-01-11",
  38.                 "shutTime": "2024-01-12",
  39.                 "clientIp": "192.168.90.107"
  40.             },
  41.             {
  42.                 "alarmId": 7,
  43.                 "planId": 2,
  44.                 "planCode": "DDDDDD1",
  45.                 "itemId": 103,
  46.                 "itemCode": "CP.023.21.01",
  47.                 "itemName": "Sovbond OTOS-80GE",
  48.                 "diffValue": 6,
  49.                 "dealStatus": 1,
  50.                 "createTime": "2024-01-11",
  51.                 "shutTime": "2024-01-12",
  52.                 "clientIp": "192.168.90.107"
  53.             }
  54.         ]
  55.     },
  56.     {
  57.         "alarmId": 3,
  58.         "planId": 17,
  59.         "planCode": "生产计划2",
  60.         "itemId": 108,
  61.         "itemCode": "CP.040.21.01",
  62.         "itemName": "Sovbond TMTM-80GE",
  63.         "diffValue": 5,
  64.         "dealStatus": 1,
  65.         "createTime": "2024-01-11",
  66.         "shutTime": "2024-01-12",
  67.         "clientIp": "192.168.90.107",
  68.         "children": [
  69.             {
  70.                 "alarmId": 4,
  71.                 "planId": 17,
  72.                 "planCode": "生产计划2",
  73.                 "itemId": 108,
  74.                 "itemCode": "CP.040.21.01",
  75.                 "itemName": "Sovbond TMTM-80GE",
  76.                 "diffValue": 4,
  77.                 "dealStatus": 1,
  78.                 "createTime": "2024-01-11",
  79.                 "shutTime": "2024-01-12",
  80.                 "clientIp": "192.168.90.107"
  81.             },
  82.             {
  83.                 "alarmId": 5,
  84.                 "planId": 17,
  85.                 "planCode": "生产计划2",
  86.                 "itemId": 108,
  87.                 "itemCode": "CP.040.21.01",
  88.                 "itemName": "Sovbond TMTM-80GE",
  89.                 "diffValue": 5,
  90.                 "dealStatus": 1,
  91.                 "createTime": "2024-01-11",
  92.                 "shutTime": "2024-01-12",
  93.                 "clientIp": "192.168.90.107"
  94.             }
  95.         ]
  96.     },
  97.     {
  98.         "alarmId": 8,
  99.         "planId": 15,
  100.         "planCode": "生产计划1",
  101.         "itemId": 732,
  102.         "itemCode": "CP.02",
  103.         "itemName": "美年达",
  104.         "diffValue": 7,
  105.         "dealStatus": 1,
  106.         "createTime": "2024-01-11",
  107.         "shutTime": "2024-01-12",
  108.         "clientIp": "192.168.90.107",
  109.         "children": []
  110.     }
  111. ]

需要值得注意的时候，你已关闭按钮在被关闭时需要使用v-show而不是v-if

因为：

已关闭按钮的 disabled 属性是通过 v-if 条件来控制的。这样的实现方式可能会导致 Vue 在渲染时忽略 disabled 属性，因为在 v-if 的条件下，即使按钮处于已关闭状态，它仍然存在于 DOM 中，只是在用户界面上被隐藏了。

解决这个问题的一种方式是使用 v-show 指令而不是 v-if 来控制按钮的显示与隐藏。v-show 不会在元素隐藏时将其从 DOM 中移除，而是使用 CSS 样式来控制显示和隐藏，这样在已关闭状态下，按钮依然存在于 DOM 中，但用户无法与其交互。

或者将关闭按钮写成这样：

  1. <el-button
  2.   type="text"
  3.   size="small"
  4.   :disabled="scope.row.dealStatus === 1"
  5. >已关闭</el-button>

所以v-show和v-if有时候达到的效果可能一样，但也不能乱使用，更何况有时候产生的效果是完全不一样的。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/1021886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号