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

已于 2024-01-12 09:54:19 修改
阅读量1.2k 收藏 9
点赞数 9
分类专栏： Vue2 文章标签： vue.js javascript 前端
于 2024-01-12 09:52:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56818823/article/details/135544544
版权

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

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

实现代码：

<!--物料管理 -->
<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="tableList"
      row-key="alarmId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="计划编码" prop="planCode" />
      <el-table-column label="产品编码" prop="itemCode" />
      <el-table-column label="产品名称" prop="itemName" />
      <el-table-column label="缺少重量" prop="diffValue" />
      <el-table-column label="关闭时间" prop="shutTime" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="close(scope.row)"
            v-if="scope.row.dealStatus == 0"
            >关闭</el-button
          >
          <el-button
            type="text"
            size="small"
            v-show="scope.row.dealStatus == 1"
            disabled
            >已关闭</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { alarmList, closeAlarm } from "../../../api/alarm/index";
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      tableList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async close(row) {
      console.log("参数", row);
      const obj = { alarmId: row.alarmId, dealStatus: 1 };
      const res = await closeAlarm(obj);
      if (res) {
        this.$notify({
          title: "成功",
          message: "该物料告警已被关闭",
          type: "success",
        });
        console.log("关闭成功", res);
        this.getList();
      }
    },
    async getList() {
      const res = await alarmList(this.queryParams);
      if (res) {
        console.log("告警记录", res);
        const newTableList = [];
        res.rows.forEach((item) => {
          const existingItem = newTableList.find(
            (newItem) => newItem.planCode === item.planCode
          );

          if (existingItem) {
            // 如果已存在相同 planCode 的项，将当前项添加到其 children 数组中
            existingItem.children.push({
              alarmId: item.alarmId,
              planId: item.planId,
              planCode: item.planCode,
              itemId: item.itemId,
              itemCode: item.itemCode,
              itemName: item.itemName,
              diffValue: item.diffValue,
              dealStatus: item.dealStatus,
              createTime: item.createTime,
              shutTime: item.shutTime,
              clientIp: item.clientIp,
            });
          } else {
            // 如果不存在相同 planCode 的项，直接添加当前项
            newTableList.push({
              alarmId: item.alarmId,
              planId: item.planId,
              planCode: item.planCode,
              itemId: item.itemId,
              itemCode: item.itemCode,
              itemName: item.itemName,
              diffValue: item.diffValue,
              dealStatus: item.dealStatus,
              createTime: item.createTime,
              shutTime: item.shutTime,
              clientIp: item.clientIp,
              children: [],
            });
          }
        });
        // console.log("告警记录数据结构", newTableList);
        this.tableList = newTableList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.callback-btn {
  font-size: 16px;
  font-weight: bold;
  margin-top: 16px;
  color: red;
}
</style>

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

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

[
    {
        "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 中，但用户无法与其交互。

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

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

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

多看书少吃饭
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue实现树形结构样式和功能的实例代码
10-16
主要介绍了vue树形结构样式和功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
knockoutjs模板实现树形结构列表
12-07
数据结构 /*数据*/ var ko_vue_data=[ { name: "总能耗", number:"0", energyone: 14410, energytwo: 1230, energythree: 1230, huanRatio: -36.8, tongRatio: 148.5, child: [ { name: "租户电耗", number:"1", energyone: 14410, energytwo: 1230, energythree: 1230,
Vue树形数据处理(js)
易函123
08-13 1806
当前需求:层级列表中选中某个元素,则获取最底层子集id,并用逗号连接(1,2,3,4,5); 数据形式: let data = [{ id:"1", children:[{ id:"11", children:[{ id:"111", ...
【Vue基础知识总结 5】Vue实现树形结构，4面阿里拿到P7Offer
最新发布
2401_84140816的博客
04-11 629
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
手写组件递归实现树状表格
L_Sarah的博客
05-05 2482
vue实现树状表格 功能：大部分的ui框架（element ui、view ui等）都有树状表格，但有时候现有的框架样式并不能满足产品的需求，因此我们就需要手写树状表格。 要点：利用vue手写树状表格，主要有2个要点，一是利用组件的递归，实现层级的展示；二是利用js的递归，...
如何使用vue-table-with-tree-grid树形表格组件
improvement
06-10 4815
如何使用vue-table-with-tree-grid树形表格组件 1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。 2.如果你是使用vue ui搭建的项目，使用时操作如下; ​ 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 ​ 2.2:打开main.js，导入vue-table-with-tree-grid
【JavaScript源代码】vue Element-ui表格实现树形结构表格.docx
12-29
vue Element-ui表格实现树形结构表格 　　本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码，供大家参考，具体内容如下　　前端效果展示:　　在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。　　通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。　　row-key="id"和:tree-props="{children: 'ch
vue树形表格
weixin_49393290的博客
11-01 5438
耗时三个星期，我做出来三张表，都做了些什么呢？ 这张表是任务列表 这涉及到了element中的tree组件，以及引入跳转页面如何引入。还有填写某个表之后会有一栏状态动态变化等等。 首先我们先来看第一个功能，树形表格。 是 ...
vue+Element-ui实现树形组件、表格树
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
vue树形表格的做法
Vivien_CC的博客
11-28 831
【代码】vue树形表格的做法。
vue-table-with-tree-grid系列之树形表格
老__L的博客
12-24 1064
树形表格
vue中的树形表格
wind的博客
03-30 795
1.安装依赖：npm i vue-table-with-tree-grid -S。使用vue-table-with-tree-grid。2.main.js中全局引入和注册。
Django树形结构实现方法
01-27
Djangomptt是个Django第三方组件，目标是使Django项目能在数据库中存储层级数据（树形数据）。它主要实现了修改过的前序遍历算法，如果你对原理还不是很了解，可以看我的这篇文章。当然，使用mptt时，原理是可以不用了解的，因为具体的实现细节都已经隐藏。不过，如果项目不是使用的Django，可以参考具体的实现原理。 在整篇文章中，我们将会拿《在数据库中存储层级结构》中的例子作为本文的例子。我们打算在数据库中存储这张图中的数据：在介绍mptt之前，如果你的需求仅仅是像
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能
Blog of Leviash
08-25 716
本文介绍了如何在Vue.js框架下实现一个树状表格，其中只支持选择父节点的复选框。通过这个功能，用户可以方便地选择表格中的父节点，而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
Vue基础知识总结 5：vue实现树形结构
热门推荐
学Java，找哪吒
07-07 1万+
一、前言 开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。 Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。 效果展示： 二、代码实例 1、数据库设计 2、实体类 一般树形结构都是创建若干层实体类，然后通过list结合在一起，面
Vue实战（三）：实现树形表格
阿标的博客
03-21 1378
实现树形表格
Vue 小结 --- 树形结构
m0_66430291的博客
03-26 5159
组织架构----树形结构布局 一个企业的组织架构是这个企业的灵魂, 组织架构常采用树形金字塔式结构来构建 采用element中的 tree组件 可以实现树形结构,用清晰的层级结构展示信息 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> <script> export default { data() { ret...
vue+element ui实现树形表格
09-06
Vue Element UI可以通过使用Element UI的Table组件和El-Tree组件来实现树形表格。 首先，我们需要在Vue项目中引入Element UI库。可以通过npm安装Element UI，并在main.js中引入所需的组件。 接下来，在Vue组件中使用Table组件来实现表格的基本结构。设置表格的列数据，并定义表格的数据源。 然后，在Table组件中使用scoped slot来自定义每个单元格的内容。在需要显示树形结构的列中，我们可以使用El-Tree组件来渲染树形图标和文字。 在实现树形结构时，可以使用Element UI提供的treeData结构来描述数据的层级关系。通过设置每个节点的label和children属性，可以实现树形结构的展示。 另外，Element UI还提供了一些treeProps属性来自定义树形结构的样式。例如，可以通过设置indent属性来控制每一层级的缩进距离，即树形结构的层级感。 最后，可以在表格中使用一些Element UI提供的方法和事件来实现树形表格的交互功能。例如，可以通过调用this.$refs.table.toggleRowExpansion(rowData)来展开或收起某一行的子节点。 总结，通过使用Element UI的Table组件和El-Tree组件，我们可以很方便地实现树形表格。只需要设置表格的列数据和数据源，以及自定义每个单元格的内容，就可以展示出树形结构的表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多看书少吃饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值