vue刷新dialog和steps组件高度出现问题

Question

当项目刚开始打开的时候，dialog的样式

，然后下面是steps样式：

这样显示是正确的。但是当我刷新页面之后，样式就变成了下面：

这是为什么啊？？？

 

下面是代码：

<!-- 发货弹出框 -->
    <el-dialog
      title="发货"
      :visible.sync="dialogSend"
      width="30%"
      custom-class="dialog"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="快递公司"
          :label-width="formLabelWidth"
          prop="company"
        >
          <el-input v-model="form.company" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="物流单号" :label-width="formLabelWidth" prop="num">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSend = false">取 消</el-button>
        <el-button type="primary" @click="sure('ruleForm')">发 货</el-button>
      </div>
    </el-dialog>

没有设置css样式。

然后是steps：

<el-steps :active="active" align-center>
        <el-step
          :title="item.title"
          :description="item.time"
          v-for="(item, index) in step"
          :key="index"
        >
          <img
            :src="item.icon_active"
            alt=""
            slot="icon"
            v-if="active >= index + 1"
            class="icon"
          />
          <img :src="item.icon" alt="" slot="icon" v-else class="icon" />
        </el-step>
      </el-steps>

step: [
        {
          title: "待付款",
          icon: require("../../assets/order/noSend.png"),
          icon_active: require("../../assets/order/noPay-active.png"),
          time: "2021-02-12",
        },
        {
          title: "待发货",
          icon: require("../../assets/order/noSend.png"),
          icon_active: require("../../assets/order/noPay-active.png"),
          time: "2021-02-12",
        },
        {
          title: "待收货",
          icon: require("../../assets/order/noTake.png"),
          icon_active: require("../../assets/order/noPay-active.png"),
        },
        {
          title: "已完成",
          icon: require("../../assets/order/finish.png"),
          icon_active: require("../../assets/order/noPay-active.png"),
        },
      ], //订单状态步骤条

也没有设置css

Answer 1

dialog弹窗没设置固定高度的问题吧？
或者说问题可以描述的再详细点，可以的话 贴出来相关的部分代码？