vue基于el-timeline组件实现动态表格时间线

Posted 2022-11-28 水星记_

前言

element中表格和时间线组件相信不少同学都用过吧，现在有这么一个需求，利用时间线组件实现不同时间线下的表格数据展示，同时表格表头及表格内的数据也是动态渲染的，效果如下图。

---

实现效果：

---

实现思路：

其实实现这个小功能非常简单，首先，我们要在 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>

---

拓展

有关于动态表格与其他组件结合使用的操作，大家可移步博主另一篇文章（vue基于element实现动态表格）