dialog 遮盖层

Vue开发中出现对话框被遮罩层挡住问题解决方案

造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：

# modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true

Element UI该组件已经在属性层面提供了解决办法，只要添加
:modal-append-to-body="false"
就可以了。

vue 手机输入框回车页面刷新

当Form组件中只有一个Input组件时，鼠标聚焦输入框后，点击回车键，页面就会刷新

# 例如以下代码
<el-form :model="form">
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
  </el-form-item>
</el-form>

解决方法

# 方法一：
# 用@submit.native.prevent来阻止默认行为，在组件Form上添加@submit.native.prevent
<el-form :model="form"  @submit.native.prevent>
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
  </el-form-item>
</el-form>

# 方法二：
# 再在表单里添加一个Input组件（若需求需要一个input,可将第二个Input组件隐藏）
<el-form :model="form">
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
    <el-input v-show="false"></el-input>
  </el-form-item>
</el-form>

数据更新但是页面没有更新的情况

使用this.$forceUpdate()可以重新渲染组件,这样就可以得到想要的效果。
vue官方对$forceUpdate的解释是：
$forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。