登录
当前位置： 首页 > 知识库问答 >
问题：

vue.js - el-table动态表头，如何根据tableData数据进行渲染？

璩浩广
2024-11-29

tableData重组之后的数据如下

[
    {
        "dbhjEventAlertEntities": [
            {
                "eventContent": "",
                "eventTime": "0816",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0817",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0818",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0819",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0820",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0821",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0822",
                "rowLocked": 0
            },
            {
                "eventContent": "警报内容",
                "eventLevel": 0,
                "eventTime": "0823",
                "eventType": "dlcsr",
                "id": 1,
                "rowLocked": 0
            }
        ],
        "eventType": "dlcsr",
        "rowLocked": 0,
        "typeName": "xxxxx",
        "0816": "",
        "0817": "",
        "0818": "",
        "0819": "",
        "0820": "",
        "0821": "",
        "0822": "",
        "0823": "警报内容"
    },
    {
        "dbhjEventAlertEntities": [
            {
                "eventContent": "",
                "eventTime": "0816",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0817",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0818",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0819",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0820",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0821",
                "rowLocked": 0
            },
            {
                "eventContent": "XXXXX",
                "eventLevel": 1,
                "eventTime": "0822",
                "eventType": "dlcb",
                "id": 2,
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0823",
                "rowLocked": 0
            }
        ],
        "eventType": "dlcb",
        "rowLocked": 0,
        "typeName": "xxxx",
        "0816": "",
        "0817": "",
        "0818": "",
        "0819": "",
        "0820": "",
        "0821": "",
        "0822": "警报内容",
        "0823": ""
    },
    {
        "dbhjEventAlertEntities": [
            {
                "eventContent": "",
                "eventTime": "0816",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0817",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0818",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0819",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0820",
                "rowLocked": 0
            },
            {
                "eventContent": "警报内容",
                "eventLevel": 2,
                "eventTime": "0821",
                "eventType": "dlcss",
                "id": 3,
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0822",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0823",
                "rowLocked": 0
            }
        ],
        "eventType": "dlcss",
        "rowLocked": 0,
        "typeName": "xxxx",
        "0816": "",
        "0817": "",
        "0818": "",
        "0819": "",
        "0820": "",
        "0821": "警报内容",
        "0822": "",
        "0823": ""
    },
    {
        "dbhjEventAlertEntities": [
            {
                "eventContent": "",
                "eventTime": "0816",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0817",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0818",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0819",
                "rowLocked": 0
            },
            {
                "eventContent": "有警报",
                "eventLevel": 2,
                "eventTime": "0820",
                "eventType": "jgxs",
                "id": 4,
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0821",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0822",
                "rowLocked": 0
            },
            {
                "eventContent": "",
                "eventTime": "0823",
                "rowLocked": 0
            }
        ],
        "eventType": "jgxs",
        "rowLocked": 0,
        "typeName": "XXXXXXX",
        "0816": "",
        "0817": "",
        "0818": "",
        "0819": "",
        "0820": "有警报",
        "0821": "",
        "0822": "",
        "0823": ""
    }
]

代码

  <template v-for="(item, index) in tableConfig">
                     
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              align="center"
            >
            </el-table-column>
                   
          </template>

动态表头是根据返回的eventTime来处理的，现在要求是 如果eventContent有内容那么对应的那个时间下 显示 有警报 后期可能改成一个图片 没有内容 就显示空 点击之后 弹出 警报内容

不知道要怎么展示

共有2个答案

夹谷星剑
2024-11-29

我的理解是表头从每个对象的dbhjEventAlertEntities中取出所有的eventTime的值，表格内容显示对应的值，如果我的理解没错的话可以用下面的代码

<template>
  <div>
    <el-table :data="tableData">

      <el-table-column v-for="i in dataTitle" :key="i" :label="i" :prop="i"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          dbhjEventAlertEntities: [
            {
              eventContent: '',
              eventTime: '0816',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0817',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0818',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0819',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0820',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0821',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0822',
              rowLocked: 0
            },
            {
              eventContent: '警报内容',
              eventLevel: 0,
              eventTime: '0823',
              eventType: 'dlcsr',
              id: 1,
              rowLocked: 0
            }
          ],
          eventType: 'dlcsr',
          rowLocked: 0,
          typeName: 'xxxxx',
          '0816': '',
          '0817': '',
          '0818': '',
          '0819': '',
          '0820': '',
          '0821': '',
          '0822': '',
          '0823': '警报内容'
        },
        {
          dbhjEventAlertEntities: [
            {
              eventContent: '',
              eventTime: '0816',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0817',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0818',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0819',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0820',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0821',
              rowLocked: 0
            },
            {
              eventContent: 'XXXXX',
              eventLevel: 1,
              eventTime: '0822',
              eventType: 'dlcb',
              id: 2,
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0823',
              rowLocked: 0
            }
          ],
          eventType: 'dlcb',
          rowLocked: 0,
          typeName: 'xxxx',
          '0816': '',
          '0817': '',
          '0818': '',
          '0819': '',
          '0820': '',
          '0821': '',
          '0822': '警报内容',
          '0823': ''
        },
        {
          dbhjEventAlertEntities: [
            {
              eventContent: '',
              eventTime: '0816',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0817',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0818',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0819',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0820',
              rowLocked: 0
            },
            {
              eventContent: '警报内容',
              eventLevel: 2,
              eventTime: '0821',
              eventType: 'dlcss',
              id: 3,
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0822',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0823',
              rowLocked: 0
            }
          ],
          eventType: 'dlcss',
          rowLocked: 0,
          typeName: 'xxxx',
          '0816': '',
          '0817': '',
          '0818': '',
          '0819': '',
          '0820': '',
          '0821': '警报内容',
          '0822': '',
          '0823': ''
        },
        {
          dbhjEventAlertEntities: [
            {
              eventContent: '',
              eventTime: '0816',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0817',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0818',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0819',
              rowLocked: 0
            },
            {
              eventContent: '有警报',
              eventLevel: 2,
              eventTime: '0820',
              eventType: 'jgxs',
              id: 4,
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0821',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0822',
              rowLocked: 0
            },
            {
              eventContent: '',
              eventTime: '0823',
              rowLocked: 0
            }
          ],
          eventType: 'jgxs',
          rowLocked: 0,
          typeName: 'XXXXXXX',
          '0816': '',
          '0817': '',
          '0818': '',
          '0819': '',
          '0820': '有警报',
          '0821': '',
          '0822': '',
          '0823': ''
        }
      ]
    };
  },
  computed: {
    dataTitle() {
      const titles = new Set();
      this.tableData.forEach(item => {
        item.dbhjEventAlertEntities.forEach(i => {
          titles.add(i.eventTime);
        });
      });
      return [...titles];
    }
  }
};
</script>
李华茂
2024-11-29

要实现基于 tableData 动态生成 el-table 表头，并根据 eventContent 的内容显示相应的信息，你可以按照以下步骤进行：

  1. 解析 tableData 来生成表头：遍历 tableData 中的每个对象，提取所有唯一的 eventTime 值作为表头。
  2. 生成 el-table 列配置：根据提取的 eventTime 值生成 el-table-column 配置。
  3. 自定义单元格内容：在 el-table 的 scoped slot 中根据 eventContent 的值来显示相应的内容。

下面是一个可能的实现方案：

1. 提取唯一的 eventTime 值作为表头

你可以在 Vue 组件的 data 或 computed 属性中完成这一步：

data() {
  return {
    tableData: [
      // ... (你的数据)
    ],
    tableColumns: [],
  };
},
computed: {
  uniqueEventTimes() {
    const times = new Set();
    this.tableData.forEach(item => {
      item.dbhjEventAlertEntities.forEach(entity => {
        times.add(entity.eventTime);
      });
    });
    return Array.from(times).sort();
  },
  tableConfig() {
    return this.uniqueEventTimes.map(time => ({
      label: time,
      prop: time,
    }));
  }
}

2. 在模板中使用 v-for 生成 el-table-column

你已经有了这部分代码，只需要确保 tableConfig 是正确的：

<el-table :data="tableData">
  <template v-for="(item, index) in tableConfig">
    <el-table-column
      :key="index"
      :label="item.label"
      :prop="item.prop"
      align="center"
    >
      <template slot-scope="scope">
        <div v-if="scope.row[item.prop]">
          <!-- 这里可以放置图片或者文本 -->
          <span v-if="scope.row.dbhjEventAlertEntities.some(e => e.eventTime === item.label && e.eventContent)">有警报</span>
          <span v-else>&nbsp;</span>
        </div>
        <el-button @click="showAlertContent(scope.row, item.label)" type="text" size="small" v-else>
          查看警报
        </el-button>
      </template>
    </el-table-column>
  </template>
</el-table>

3. 自定义单元格内容

在上面的模板中，我们使用了一个 scoped slot 来自定义单元格内容。如果 scope.row[item.prop] 存在（虽然在这个例子中它不会直接存在，因为我们使用 eventTime 作为 prop，但可以通过其他方式判断），则检查 dbhjEventAlertEntities 中是否有对应的 eventTime 且 eventContent 不为空。如果不为空，显示“有警报”（或者图片）；如果为空，显示一个按钮用于查看警报内容。

4. 添加查看警报内容的方法

在 Vue 组件的 methods 中添加 showAlertContent 方法：

methods: {
  showAlertContent(row, eventTime) {
    const alert = row.dbhjEventAlertEntities.find(e => e.eventTime === eventTime && e.eventContent);
    if (alert) {
      alert(alert.eventContent); // 这里可以用更复杂的逻辑来显示警报内容，比如弹窗
    }
  }
}

这样，你就可以根据 eventContent 的内容动态地显示表头和单元格内容了。

 类似资料：
  • javascript - el-table 如何根据表格数据合并行？

    el-table 如何根据表格数据合并行。 如图所示，name列的值一样，就合并成一行；Amount 1列合并成3行 演示地址

  • vue.js - el-table-column 中如何使用 el-form-item 进行表单验证？

    该如何正确的做动态表单校验： “el-form-item”是后来加上的，加上el-select之后位置都变了

  • 前端 - 如何使用el-table渲染嵌套的数据？

    请问这样的数据在el-table里如何渲染出来，activityList也要渲染 id activityList 1 test1(2),test2(3) 这样的数据应该如何去渲染 还是处理一下rows里面的activityList这个数据？

  • 前端 - react-router-dom v6 如何根据数据动态渲染路由？

    const routes = [ { }, { }, ]; // console.log(routes); export { routes }; export default createBrowserRouter(routes); 这是我的路由表，现在是静态写的，如何根据后端返回的数据动态渲染路由表？在这里面不能使用hook， 我在别的组件可以这样获取到数据 import { useMenuSt

  • javascript - el-table表格数据状态怎么转换？

    表格数据转换，后台返回的表格数据状态都是数字，所以前台需要转换一下。 后台返回的状态配置数据： 表格数据 根据状态配置数据使得前台表格展示相应的名称label。 我是怎么处理的呢，我对el-table进行二次分装，然后在处理数据转换 filterVal就是我分装的方法，但是封装的有问题，展示出来的还是数字

  • javascript - el-table 选择列表头如何自定义？

    如图：需要表头的全选改为文字。如何实现 element-ui版本v2.15.12。 查了很多资料都说没办法实现

  • 如何根据在JTable中动态添加的列对行进行排序？

    已经存在一个jtable，我需要动态添加一列，然后为该列设置表格单元格呈现器，单元格呈现器是带有图标的jlabel。我已经做完了。 我的问题是：现在我需要根据表格单元格呈现器中使用的不同图标对列进行排序，那么如何做到这一点呢？谢谢你。

  • vue.js - 如何在Vue.js项目中根据域名动态设置网页标题？

    正式的环境中配置了两个域名，但是根据两个不同的域名访问的前端页面是相同的，现在的需求是，访问不同的域名相对应的网页上的标签题目也是不同的 在setting.js配置文件中获取不到域名信息，配置文件中的title直接写了之前的标签题目，现在无论是改index.html中的title标签还是vue.config.js文件中的内容，网页标签题目不会变，只有修改settings.js中的title属性才会

相关问答

javascript - el-table 选择列表头如何自定义？如何根据在JTable中动态添加的列对行进行排序？vue.js - 如何在Vue.js项目中根据域名动态设置网页标题？javascript - Vue3 + Element Plus 开发网页，使用 el-table 表格组件完成横、列都是动态数据的渲染，并且动态数据中含有二级分类？vue.js - 如何修改el-table-column slot="header" 中的 el-checkbox 呢？

相关文章

如何根据密钥对GSON数组进行排序？JavaScript如何动态创建table表格根据对象列表渲染ReactJS组件Vue.js实现简单动态数据处理对MySQL数据库进行动态SQL查询

相关阅读

JSF数据表(h:dataTable)DataModel排序数据JVM 运行时数据区1-Stack-动态链接机制-Dynamic LinkingJavaScript数据结构与算法：动态规划MySQL导出表数据MySQL查询数据表

相关工具

物体根据重力感应运动根据开发者帐号查看App数据库自动更新及自动赋值工具Commons ELjActiveRecord-EL

相关文档

利用 Python 进行数据分析 · 第 2 版Vue.js 服务器端渲染指南Excel 数据透视表应用大全数据科学鲜活的数据数据可视化指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.