vue2+element实现图中的表格

表格中一条数据是一组，每一组的第一行是无关表头的数据展示，每一组中间有间隙

img

你好，有源代码吗？

不用elementui，手搓就行了，你这个跟elementui的表格不怎么搭边

自己用div慢慢布局，这已经不是UI框架的范畴了

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7396603
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue2+element使用插件导出全部表格数据
  • 除此之外, 这篇博客: vue + element 表格以及表单数据动态绑定 -- 表单数据动态绑定中的 在上图代码中需要注意 三点： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    a. :model = "{ domains }" 

    domains 数据格式如下图：

    [{
//唯一的key值，用于绑定数据
    "key" : "name",
//用于表单的前缀
    "label" : "姓名",
//表单中填写的数据
    "value" : ""
},{
    "key" : "age",
    "label" : "年龄",
    "value" : ""
}]

    b. :label="domain.name"  

    绑定 - 表单前缀的展示
    c. :key="domain.key"

    绑定 - 表单填写的数据

     

    ！！！申明：这仅仅是针对部分数据格式的渲染方式，仅供大家参考，整体都是这个思路，不喜勿喷哈

    欢迎关注我的公众号：码上学习鸭

  • 您还可以看一下 杜从文老师的基于vue-element-admin的后台权限验证系统课程中的 在响应拦截器里实现自定义错误提示小节, 巩固相关知识点
  • 以下回答来自chatgpt:

    根据问题描述和参考资料，我理解您想在Vue2和Element UI中实现一个表格，其中每条数据都是一组，每组数据中的第一行是用于展示无关表头的数据，每组数据之间有间隙。以下是一个具体的解决方案：

    1. 首先，确保已经安装Vue2和Element UI。如果没有安装，可以使用以下命令安装：
    npm install vue@2.6.11
npm install element-ui -S
    1. 创建一个Vue组件，例如TableView.vue，并在<template>标签中定义表格的结构。根据问题描述，每条数据是一组，可以使用<el-row>和<el-col>组件来实现每组数据的布局，如下所示：
    <template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="(data, index) in tableData" :slot="`row-${index}`">
      <!-- 第一行无关表头的数据 -->
      <el-table-column :label="data.header" prop="dummyField" width="100%">
        <template slot-scope="scope">
          <span>{{ data.header }}</span>
        </template>
      </el-table-column>
      <!-- 其他数据 -->
      <el-table-column v-for="(item, itemIndex) in data.items" :key="itemIndex" :label="item.label" :prop="item.prop" width="100%">
        <template slot-scope="scope">
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
    1. 在<script>标签中，定义表格的数据和无关表头的数据。根据问题描述，每组数据包含一个无关表头和其他数据，我们可以用一个数组来表示每组数据，如下所示：
    <script>
export default {
  data() {
    return {
      tableData: [
        {
          header: 'Group 1 Header',
          items: [
            { label: 'Item 1', prop: 'item1' },
            { label: 'Item 2', prop: 'item2' },
            // 其他项...
          ]
        },
        {
          header: 'Group 2 Header',
          items: [
            { label: 'Item 1', prop: 'item1' },
            { label: 'Item 2', prop: 'item2' },
            // 其他项...
          ]
        },
        // 其他组...
      ]
    };
  }
};
</script>
    1. 在需要使用该表格的地方，导入TableView.vue组件，并添加到页面中即可实现所需的表格结构。

    以上是一个基本的解决方案，根据您的具体需求，您可以自定义样式和添加更多功能，例如设置表格的样式、添加分页功能等。希望能帮助到您！如果您有任何进一步的问题，请随时提出。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^