el-timeline嵌套el-timeline使用时,子级el-timeline节点时间线不显示

问题描述:
el-timeline嵌套el-timeline使用时,子级el-timeline节点时间线不显示。
问题结果如下图所示
在这里插入图片描述
待实现效果如下图所示
在这里插入图片描述
问题原因:
父级el-timeline的第三个el-timeline-item在elementUI原生样式中会自动定义为末级节点,其中末级节点样式影响了子节点样式,故子节点时间线不显示。
如下图所示
在这里插入图片描述
解决思路:
给嵌套使用的子级el-timeline组件的el-timeline-item增加属性区分当前节点是否为最后一个节点,一般来说接口会返回一个状态来区分当前节点是否已审批,顺序排列时,未审批节点即为最后一个节点,利用这个思路我们给子级el-timeline的末级节点单独书写样式来解决这一问题。

step1:根据是否已审批属性判断当前节点是否为最后一个节点,增加对应标识
     this.resultList = res.data // 接口返回数据列表
     let subIndex = this.resultList.findIndex(item => item.taskHandleStatus === 'UNDO') // 获取未审批节点下标
      if (subIndex > -1) {
          let item = this.resultList[subIndex]
          this.$set(item, 'isLastNode', true) // 给未审批节点设置标识
       }
step2:根据标识自定义节点样式;
     // 子级el-timeline组件标签
      <el-timeline>
          <el-timeline-item
               v-for="(item, index) in resultList"
               :key="'icon_' + index"
               :class="item.isNextNode ? 'undo-node' : 'pass-node'"
           ></el-timeline-item>
      </el-timeline>
      
   // 自定义样式----注意一定要加important 才能够覆盖原生elementUI的样式属性
   .pass-node .el-timeline-item__tail {
    	border-color: #81d15b; 
    	display: block !important; // 末级节点显示时间线
  	}
   .pass-node:last-child .el-timeline-item__tail {
    	display: none !important; // 最后一个末级节点不显示时间线
  	}
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值