vue+el-timeline组件:打造动态表格时间线的新利器

前言

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


实现效果:

在这里插入图片描述


实现思路:

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


源码如下:

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

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 中,使用 Element UI 的 el-table 和 el-dialog 组件,可以按照以下步骤来实现自定义弹窗: 1. 在 el-table 中定义 scoped slot,例如: ```html <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> <el-table-column label="Actions"> <template #default="{ row }"> <el-button @click="handleClick(row)">Edit</el-button> <el-button @click="handleDelete(row)">Delete</el-button> </template> </el-table-column> </el-table> ``` 2. 在 setup 函数中定义 handleClick 方法,例如: ```javascript import { ref } from 'vue'; export default { setup() { const dialogVisible = ref(false); const editRow = ref({}); const handleClick = (row) => { dialogVisible.value = true; editRow.value = Object.assign({}, row); }; return { dialogVisible, editRow, handleClick }; } } ``` 3. 在 el-dialog 中使用 editRow 数据来渲染自定义的弹窗: ```html <el-dialog v-model:visible="dialogVisible"> <el-form v-if="editRow"> <el-form-item label="Name"> <el-input v-model="editRow.name"></el-input> </el-form-item> <el-form-item label="Gender"> <el-radio-group v-model="editRow.gender"> <el-radio :label="1">Male</el-radio> <el-radio :label="2">Female</el-radio> </el-radio-group> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="handleSave">Save</el-button> </div> </el-dialog> ``` 这样,当用户点击 Edit 按钮时,就会弹出自定义的编辑弹窗,用户可以在弹窗中编辑数据,点击确认按钮后,数据会保存到 editRow 中,然后再自动更表格中。注意,在 Vue3 中使用 v-model 绑定 el-dialog 的 visible 属性时,需要加上修饰符 `v-model:visible`,否则会出现警告。同时,在 el-dialog 中添加一个保存按钮,点击后可以保存数据并关闭弹窗。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值