Components - Timeline Basic usage <div class="block"> <div class="radio"> Sorting: <el-radio-group v-model="reverse"> <el-radio :label="true">Reverse order</el-radio> <el-radio :label="false">Positive sequence</el-radio> </el-radio-group> </div> <el-timeline :reverse="reverse"> <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp"> {{activity.content}} </el-timeline-item> </el-timeline> </div> <script> export default { data() { return { reverse: true, activities: [{ content: 'The activity started as scheduled', timestamp: '2018-04-15' }, { content: 'Passed review', timestamp: '2018-04-13' }, { content: 'Created successfully', timestamp: '2018-04-11' }] }; } }; </script> Custom node styles <div class="block"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp"> {{activity.content}} </el-timeline-item> </el-timeline> </div> <script> export default { data() { return { activities: [{ content: 'Support the use of icons', timestamp: '2018-04-12 20:46', size: 'large', type: 'primary', icon: 'el-icon-more' }, { content: 'Support custom colors', timestamp: '2018-04-03 20:46', color: '#0bbd87' }, { content: 'Support custom size', timestamp: '2018-04-03 20:46', size: 'large' }, { content: 'Default style node', timestamp: '2018-04-03 20:46' }] }; } }; </script> Custom timestamp <div class="block"> <el-timeline> <el-timeline-item timestamp="2018/4/12" placement="top"> <el-card> <h4>Update Github template</h4> <p>Wang Xiaohu submitted on 2018/4/12 20:46</p> </el-card> </el-timeline-item> <el-timeline-item timestamp="2018/4/3" placement="top"> <el-card> <h4>Update Github template</h4> <p>Wang Xiaohu submitted on 2018/4/3 20:46</p> </el-card> </el-timeline-item> <el-timeline-item timestamp="2018/4/2" placement="top"> <el-card> <h4>Update Github template</h4> <p>Wang Xiaohu submitted on 2018/4/2 20:46</p> </el-card> </el-timeline-item> </el-timeline> </div> Timeline Attributes Timeline-item Attributes Timeline-Item Slot This is the end of this article about the implementation of Element Timeline. For more relevant Element Timeline content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Implementation of rewrite jump in nginx
>>: Several situations where div is covered by iframe and their solutions
Today someone talked to me about a website develo...
<br />In order to manage the vehicles enteri...
I slept late yesterday and was awake the whole da...
The office needs Ubuntu system as the Linux devel...
1. MySql Architecture Before introducing the stor...
When the data changes, the DOM view is not update...
mysql copies the files in the data directory to r...
1. Create a centos7.6 system and optimize the sys...
There are many versions of the Java language. In ...
Occasionally you'll see characters such as ...
Table of contents 1. Script vim environment 2. Ho...
Table of contents 1. Scenario 2. Solution 3. Conc...
Detailed explanation of MySql automatic truncatio...
<br />Simple example of adding and removing ...
The data type of MySQL is datetime. The data stor...