橘猫敲代码 2024-12-16 16:57 采纳率: 64.1%
浏览 7
已结题

vue elementui查询记录展示

img


这种查询记录用哪种组件展示合适，一时没想到，类似树组件，但是又不是

  • 写回答

3条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2024-12-16 17:03
    关注
    让【道友老李】来帮你解答，本回答参考通义千问qwen-plus编写，并整理提供，如果还有疑问可以点击头像关注，评论或留言
    根据您提供的图片和描述，这种查询记录展示的需求确实类似于树形结构，但又不完全符合传统的树组件。这里推荐使用**可展开表格（Expandable Table）**来展示这类数据。

    为什么选择可展开表格？

    1. 层次结构清晰：可以清晰地展示不同层级的数据关系。
    2. 灵活性高：可以在每一行中嵌入更多的信息，如图标、按钮等。
    3. 用户体验好：用户可以通过点击行来展开或收起子记录，操作直观。

    示例

    假设我们有一个查询记录表，其中每个查询可能包含多个子记录。我们可以使用一个可展开表格来展示这些数据。

    数据结构示例

    [
  {
    "id": 1,
    "query": "查询1",
    "children": [
      {
        "id": 11,
        "subQuery": "子查询1"
      },
      {
        "id": 12,
        "subQuery": "子查询2"
      }
    ]
  },
  {
    "id": 2,
    "query": "查询2",
    "children": [
      {
        "id": 21,
        "subQuery": "子查询1"
      }
    ]
  }
]

    HTML + JavaScript 示例

    这里使用HTML和JavaScript来实现一个简单的可展开表格。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expandable Table</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
      text-align: left;
    }
    .expandable {
      cursor: pointer;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <table id="queryTable">
    <thead>
      <tr>
        <th>查询</th>
        <th>子查询</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    const data = [
      {
        id: 1,
        query: "查询1",
        children: [
          { id: 11, subQuery: "子查询1" },
          { id: 12, subQuery: "子查询2" }
        ]
      },
      {
        id: 2,
        query: "查询2",
        children: [
          { id: 21, subQuery: "子查询1" }
        ]
      }
    ];

    function renderTable(data) {
      const tbody = document.getElementById('queryTable').getElementsByTagName('tbody')[0];
      tbody.innerHTML = '';

      data.forEach(item => {
        const row = document.createElement('tr');
        row.className = 'expandable';
        row.dataset.id = item.id;
        row.innerHTML = `
          <td>${item.query}</td>
          <td></td>
        `;
        tbody.appendChild(row);

        const childRow = document.createElement('tr');
        childRow.className = 'hidden';
        childRow.dataset.parentId = item.id;
        childRow.innerHTML = `
          <td></td>
          <td>
            <ul>
              ${item.children.map(child => `<li>${child.subQuery}</li>`).join('')}
            </ul>
          </td>
        `;
        tbody.appendChild(childRow);
      });

      document.querySelectorAll('.expandable').forEach(row => {
        row.addEventListener('click', () => {
          const parentId = row.dataset.id;
          const childRow = document.querySelector(`[data-parent-id="${parentId}"]`);
          childRow.classList.toggle('hidden');
        });
      });
    }

    renderTable(data);
  </script>
</body>
</html>

    解释

    1. HTML部分：

      • 创建了一个表格，包含表头和一个空的<tbody>。
      • 表格的样式通过CSS进行简单的美化。

    2. JavaScript部分：

      • 定义了数据结构data，包含查询和子查询。
      • renderTable函数用于渲染表格，将数据转换为HTML元素并插入到表格中。
      • 每个查询行被赋予expandable类，并添加了一个点击事件监听器。
      • 点击查询行时，会切换对应的子查询行的显示状态（通过hidden类控制）。

    总结

    使用可展开表格可以很好地展示具有层次结构的查询记录，既保持了数据的清晰性，又提供了良好的用户体验。希望这个示例对您有所帮助！如果有任何问题或需要进一步的帮助，请随时告诉我。

    评论

报告相同问题？

  • 基于Vue+ElementUI+axios前端项目
    2023-02-24 14:16
    Vue.js 是一个轻量级的前端JavaScript框架，它以数据驱动和组件化为核心，使得构建用户界面变得更加简洁和高效。Vue.js 的核心特性包括虚拟DOM、响应式数据绑定、指令系统和组件系统，使得开发人员能够轻松地创建可...
  • 前端学习——vue + elementui实现分页查询
    2023-12-20 15:44
    qq_33453797的博客 elementui使用pagination提供了多种分页功能，可以根据自己的需求选择不同的分页...分页查询功能，是很常见的一个功能，下面是记录使用vue + elementui实现的分页查询功能。要在页面中使用分页功能需要添加以下代码。
  • Vue和 ElementUI 合并单元格实现 记录
    2024-09-18 10:20
    莫问alicia的博客 文章目录 概要 代码实现 小结 概要 最近遇到个需求 实现ElementUI 表格 主要 采用 vue 和 elementUI 实现 底层单元格内容合并 记录下 先上代码 代码实现 <template> ...<template v-slot="scope"> {{ scope.row.value1 ...
  • 基于 Vue+ElementUI 的火车票售票系统前端设计与实现
    2025-09-02 12:59
    系统前端主要负责用户界面的展示和用户交互功能，用户可以通过前端界面实现查询车次、选择座位、下单购票、支付和退票等一系列操作。系统界面友好，操作简单直观，极大地提高了用户的操作体验。 系统前端的设计和...
  • vue elementui tree 任意级别拖拽功能代码
    2020-10-14 20:18
    Vue.js 是一个流行的前端框架，ElementUI 是基于 Vue 的一套组件库，提供了许多实用的 UI 组件。在本文中，我们将探讨如何实现 Vue ElementUI Tree 组件的任意级别拖拽功能，这对于构建可自定义排序的层级结构数据...
  • 学习记录-mybatis+vue+elementUi实现分页查询（前端部分）
    2022-12-24 15:06
    Record growth...的博客 其次来解决当前页以及页面大小的问题，这里要做的主要工作是：将定位数据给后端，后端将值传到前端来，传到前端来用什么来展示呢？直接展示到表单里面去。然后就是最后一个问题，怎么将定位数据动态的传送给后端呢？...
  • 基于Vue+ElementUI的借还款利息计算器
    2025-07-22 10:38
    战族狼魂的博客 技术实现采用Vue3+ElementPlus前端框架，核心算法通过计算每笔交易间的天数差来累计利息，并实现还款金额的智能分配。系统具有动态添加记录、自动排序计算、可视化展示等特点，适合个人或小微企业进行借贷管理。
  • 基于vue+elementui实现断点续传、分片上传、秒传.zip
    2024-03-03 14:35
    Vue.js是当前非常流行的前端JavaScript框架，它提供了轻量级、响应式和组件化的开发模式，极大地提高了开发效率。Element UI则是基于Vue.js的开源UI组件库，提供了一套美观、易用的界面元素，适用于企业级后台管理...
  • springboot+vue+elementui实现增删改查和分页查询
    2021-09-20 13:20
    在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
  • 【狂神vue学习记录】vue+elementUI实战
    2021-08-16 00:33
    Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Element UI 是一套基于 Vue.js 的组件库，它提供了丰富的界面元素，旨在快速构建美观的企业级Web应用。本实战教程将结合 ...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 4月7日
  • 创建了问题 12月16日