Element 步骤条多出一截的处理方法

ゝ一世哀愁。 2023-06-30 10:59 42阅读 0赞

**出错示例：**  
如图所示，在最后一个步骤节点的尾部出现了一条延长线，甚至突破了边界。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYm9ubm4_size_16_color_FFFFFF_t_70]  
**错误示例代码如下：**

<el-steps :active="4" align-center v-loading="loading" element-loading-text="..." style="padding: 80px; background-color: lightgrey">
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-edit"></el-step>
      <el-step title="步骤 3" icon="el-icon-edit"></el-step>
      <el-step title="步骤 4" icon="el-icon-edit"></el-step>
    </el-steps>

**出错原因 & 处理方法：**  
`el-steps`标签中的`v-loading="loading"`导致出错，具体原因还不清楚，可能是组件源码存在的Bug，处理方法即去除`v-loading`。至于因此失去的加载效果，将`v-loading`在此组件被调用时，加在父组件的标签上即可。

P.S. 如果没有使用`v-loading`，也有可能是其他的绑定属性导致的出错，可以通过控制属性来调试出错误。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYm9ubm4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117135232668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYm9ubm4=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关一条 MySQL 语句执行的步骤

MySQL执行一条SQL语句的过程通常涉及多个步骤，以下是一个详细的概述： 1. SQL解析：当客户端发送一条SQL查询或更新语句时，MySQL服务器首先需要解析

阳光穿透心脏的1/2处/ 2024年02月22日 06:23/ 0 赞/ 134 阅读

相关表格el-table多出一条横线，怎么解决（el-table表格下方多一条线的问题）

最近在写el-table表格的时候，发现的问题，表格多出一条横线， ![6f4ef645427f4401bd300cb420d89b04.png][] 可以看出其它行

秒速五厘米/ 2023年10月12日 18:36/ 0 赞/ 52 阅读

相关 Element 步骤条多出一截的处理方法

出错示例：如图所示，在最后一个步骤节点的尾部出现了一条延长线，甚至突破了边界。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGV

ゝ一世哀愁。/ 2023年06月30日 10:59/ 0 赞/ 43 阅读

相关 element-ui弹出多个message的问题处理

重写element-ui的message 方法一：弹出之前判断是否有多个，有则不弹出，没有则弹出一个 resetMessage.js： /重置message，防止

朱雀/ 2023年02月12日 08:28/ 0 赞/ 49 阅读

相关 element table滚动条占宽度_Element table设置固定列，没有滚动条时底部会显示一条线的解决方法...

固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left right,表示左边固定还是右边固定 :data="tableData

傷城~/ 2023年01月08日 08:13/ 0 赞/ 331 阅读

相关一条SQL查询的逻辑步骤

一条SQL查询的逻辑步骤为：步骤1：执行笛卡尔乘积（交叉连接）步骤2：应用ON筛选器（连接条件）步骤3：添加

旧城等待，/ 2022年05月11日 02:34/ 0 赞/ 251 阅读

相关 vue element组件之步骤条组件的应用

效果如下 ![20190511132448918.gif][] 代码如下 <template> <div class="body">

心已赠人/ 2022年02月02日 10:57/ 0 赞/ 963 阅读

相关 vue+element UI 文字加下划线长度多出一点点

具体结构如下(el-table->el-table-column)： ![20190518093056667.png][] 显示如下： ![201905180932195

桃扇骨/ 2022年01月30日 05:13/ 0 赞/ 445 阅读

相关 MyBatis 查询数据时属性中多对一的处理（多条数据对应一条数据）

目录数据准备查询嵌套处理（子查询）结果嵌套处理小结一对多处理：[https://blog.csdn.net/weixin\_44953

本是古典何须时尚/ 2021年09月21日 15:32/ 0 赞/ 418 阅读

相关 MyBatis 查询时属性中一对多的处理（一条数据对应多条数据）

目录前期准备按照查询嵌套处理按照结果嵌套处理小结多对一处理：[https://blog.csdn.net/weixin\_449532

- 日理万妓/ 2021年09月21日 15:32/ 0 赞/ 441 阅读