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

Question

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

发布于
2024-11-28 山东

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有内容那么对应的那个时间下显示有警报后期可能改成一个图片没有内容就显示空点击之后弹出警报内容

不知道要怎么展示

element-ui vue.js

阅读 1.6k

AI BotBETA

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

解析 tableData 来生成表头：遍历 tableData 中的每个对象，提取所有唯一的 eventTime 值作为表头。
生成 el-table 列配置：根据提取的 eventTime 值生成 el-table-column 配置。
自定义单元格内容：在 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 的内容动态地显示表头和单元格内容了。

1 个回答

得票最新

李(ಡωಡ)

2

发布于
2024-11-28 浙江

新手上路，请多包涵

我的理解是表头从每个对象的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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

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

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

3. 自定义单元格内容

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

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？

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

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

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

3. 自定义单元格内容

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

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？

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

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