关于element-ui时间线以及插槽用法总结

    最近写项目用到了element-ui时间线控件，在这里记录一下用法，方便学习和查看。

1. 首先我们看看官网给出的用法：

<div class="block">
  <div class="radio">
    排序：
    <el-radio-group v-model="reverse">
      <el-radio :label="true">倒序</el-radio>
      <el-radio :label="false">正序</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: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
   
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
   
          content: '创建成功',
          timestamp: '2018-04-11'
        }]
      };
    }
  };
</script>

这里是官网给出的基本用法，让我们看看一些基础属性：

• reverse属性：可以指定节点的排序方向，默认是正序；
• timestamp属性：时间戳，在实际项目中，此属性的值是后台传过来de；
• hide-timestamp：是否隐藏时间戳，当页面不需要展示时间的时候，可以设置此属性为true;
• color：节点颜色，可以根据状态，自定义时间线颜色；
• icon：节点图标，可以根据状态，自定义时间线图标；
      这里只介绍几个主要属性，官网都有，大家可以自行去查官方文档；我觉得此控件最优秀的地方在于可以自定义图标和颜色，真的很灵活。

2. 接下来给大家看一下，项目中实现的效果：
   所有的数据都是从后台请求过来的，数据格式和官网相同，都是数组里面包含多个对象，状态的名称、时间以及机构的名称都是包含在返回的数组对象中，可以直接拿过来展示；节点的图标和颜色，需要判断状态来展示不同的图标和颜色，此时都还不需要插槽。这里的需求是，审批通过就展示机构名称和时间，审批不通过就展示审批不通过和审批人名字、电话，审批不通过这个是需要手动加在界面上的，此时，我们可以选择使用插槽的方法，下面贴一下代码，这里是我实现的思路，如果有更好的方法，欢迎大家在评论区讨论。下面贴一下代码：

 <el-dialog
      title="状态跟踪"
      :visible.sync="wuliuopen"
      width="50%"
      :modal="ismodal"
      :close-on-click-modal="false"
    >
      <div
        style="width: 100%; margin: 0 auto; padding: 20px; margin-top: 40px"
        v-if="statuslist.length > 0"
      >
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in statuslist"
            :key="index"
            size="large"
            :icon="geticon(activity)"
            :color="getcolor(activity)"
            :timestamp="activity.approveTime">
            {
   {
   activity.approveName}}
            <br/>
            {
   {
   activity.deptName}}
            <div v-if="statuslist.length > 0">
              <slot name="timestamp" v-if="activity.approveStatus === 2">
                <span>审批不通过</span>
                <br/>
                <span>{
   {
   activity.approveUser}}</span>
                <br/>
                <span>{
   {
   activity.approveUserPhone}}</span>
                <br/>
              </slot>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div
        style="
          width: 100%;
          margin: 0 auto;
          padding: 40px;
          margin-top: 40px;
          text-align: center;
          font-size: 20px;
        "
        v-if="statuslist.length == 0"
      >
        暂无状态
      </div>

• 这是页面布局的代码

geticon(row) {
   
      var icon = ''
      if (row.approveStatus == 2) {
   
        icon = 'el-icon-close'
      } else if (row.approveStatus == 1) {
   
        icon = 'el-icon-check'
      }
      return icon
    },
 getcolor(row) {
   
    var color = ''
    if (row.approveStatus == 2) {
   
      color = '#F56C6C'
    } else if (row.approveStatus == 1) {
   
      color = '#67C23A'
    }
    return color
  },

• 这是根据不同的状态展示不同的颜色和图标
  
  以上就是使用element-ui中时间线控件的一点学习笔记，欢迎大家评论区批评指正。貌似线条的颜色也是可以改变的，大家可以参考相关文章。