el-timeline实现审批记录
时间: 2024-10-23 20:08:26 浏览: 21
`el-timeline` 是 Element UI 提供的一个用于展示时间线的组件,它非常适合展示项目进度、事件流程或者是审批记录等需要按照时间顺序排列的信息。要使用 `el-timeline` 来实现审批记录,你可以按照以下步骤操作:
1. 引入所需组件:首先,在你的 Vue 项目中安装 Element UI,并在需要的地方引入 `Timeline` 和 `TimelineItem` 组件。
```html
<script src="https://unpkg.com/element-ui@latest/lib/index.js"></script>
```
2. 定义数据结构:创建一个包含事件(通常是审批状态变化)的对象数组,每个对象应包含时间戳(如 `startTime` 和 `endTime`)、审批者名称(`approver`)以及审批状态(`status`),例如:
```js
data() {
return {
timelineData: [
{
startTime: '2022-01-01',
endTime: '2022-01-05',
approver: '张三',
status: '待审批'
},
// 更多审批记录...
]
};
}
```
3. 使用 Timeline 组件:在模板中使用 `el-timeline` 组件,并遍历 `timelineData`,为每个审批记录添加一个 `el-timeline-item`。
```html
<template>
<el-timeline :height="60" class="timeline">
<el-timeline-item v-for="(record, index) in timelineData" :key="index" :timestamp="record.startTime">
<div>{{ record.approver }} {{ record.status }}</div>
</el-timeline-item>
</el-timeline>
</template>
```
4. 样式调整:根据实际需求调整 `el-timeline` 的样式和 `el-timeline-item` 内容的布局,可以设置颜色、宽度等以区分不同阶段的审批状态。
阅读全文