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

前言

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实现动态表格）

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

组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
基于iview2/3组件的Table表格树展开/折叠
基本iview2/3组件的Table表格树折叠展开,其实就是展开的时候插入行,收缩的时候删除行 {title: '名称',key: 'name',minWidth: 200,ellipsis: tru ...
vue基于原生html标签导入excel表格及标签的美化
在做一个后台管理系统,使用的naive框架,因此以前用的基于element上传组件的导入excel就不能使用了,特别制作了这一版,做下记录,以后不管是使用什么框架,都可以直接使用. 首先安装插件 np ...
解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
<el-checkbox :value="form.test=== '1'" @change="val => $set(form,'test',val ? ' ...
vue 刷新echarts_用Vue开发动态刷新Echarts组件（以及修改时遇到的问题）
通过这篇文章我学习了vue集成echarts,尝试了一下demo没问题,但是在修改我预期效果时,却出了一点问题,最后解决思路见最后从几年前流行的jQuery插件,到现在React和Vue的组件,在业 ...
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
2020 Vue 基于Element-UI开发手动导入并使用Timeline组件（附组件文件）查看快递信息
文章目录 1.引言 2.导入与配置提供文件: 实现效果: 实现过程: 项目源码: 3.结束语点击进入Vue❤学习专栏~ 1.引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于Timelin ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...

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

前言

实现效果：

实现思路：

源码如下：

拓展

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

最新文章

热门文章