vue+el-timeline动态表格时间线

原文链接：https://blog.csdn.net/Shids_/article/details/126645038

前言
当我们需要在页面中展示一系列时间相关的事件时，常常会考虑使用时间线来呈现。而在 vue 框架中，我们可以借助一些组件库来快速实现时间线的功能。其中， el-timeline 就是一款非常优秀的时间线组件，它可以帮助我们快速地实现动态表格时间线的效果。本文将介绍如何基于 el-timeline 组件来实现 vue 中的动态表格时间线。

实现效果：

实现思路：
其实实现这个小功能非常简单，首先，我们要在 el-timeline-item 标签循环最外层的 dataList 数组，数组的 length 等于几，我们就会有几段时间线；表格中我们需要操作的是将固有的表格数据格式（一个数组）稍加修改，变成两个数组，将 el-table 中 data 属性动态绑定上 dictList 数组（表格数据），再在 el-table-column 标签中循环 dictList 数组（表头数据），最后通过 prop 和 label 属性动态绑定匹配对应的值即可。

源码如下：
<template>
<div>
<el-dialog title="历史信息" :visible.sync="centerDialogVisible" width="50%">
<el-timeline>
<el-timeline-item placement="top" :timestamp="item.sj" v-for="(item, index) in dataList" :key="index">
<el-card>
<el-table :data="item.rows" border>
<el-table-column v-for="(item, index) in item.dictList" :prop="item.indexCode" :label="item.label" :key="index" align="center"></el-table-column>
</el-table>
</el-card>
</el-timeline-item>
</el-timeline>

</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
// 模拟数据
dataList: [
{
sj: "2022-09-01",
dictList: [
{
indexCode: "name",
label: "姓名",
},
{
indexCode: "sex",
label: "性别",
},
{
indexCode: "age",
label: "年龄",
},
],
rows: [
{
name: "小明",
sex: "女",
age: "18",
},
],
},
{
sj: "2022-08-01",
dictList: [
{
indexCode: "firmName",
label: "企业名称",
},
{
indexCode: "site",
label: "企业地址",
},
{
indexCode: "date",
label: "注册日期",
},
],
rows: [
{
firmName: "文化有限公司",
site: "北京",
date: "2018-01-25",
},
],
},
{
sj: "2022-07-01",
dictList: [
{
indexCode: "plate",
label: "车牌号",
},
{
indexCode: "fuel",
label: "燃料类型",
},
{
indexCode: "plateColor",
label: "车牌颜色",
},
],
rows: [
{
plate: "京R11111",
fuel: "柴油",
plateColor: "蓝色",
},
],
},
],
centerDialogVisible: true, //弹框显隐状态
};
},
};
</script>

<style scoped>
h3 {
margin: 10px 0px;
}
</style>