关于diaLog的问题

1做一个弹框

html部分

<template>
  <el-card>
    <div slot="header">
      <span>资源分类列表</span>
      <el-button @click="dialogEditVisible = true">新增分类</el-button>
    </div>
    <div>
      <el-table v-loading="loading" element-loading-text="加载数据中" :data='tableData' stripe border :row-class-name="addRowClass">
        <el-table-column label="编号" prop="id" align="center" width="80"></el-table-column>
        <el-table-column label="标题" prop="title" align="center"></el-table-column>
        <el-table-column label="别名" prop="alias" align="center"></el-table-column>
        <el-table-column label="是否隐藏" prop="hide" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.hide=='0'">隐藏</p>
            <p v-else-if="scope.row.hide=='1'">显示</p>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" align="center" width="140"></el-table-column>
      </el-table>
    </div>
    <el-dialog title="营销单详情" width="920px" @close="isEdit = false" :visible.sync="dialogEditVisible">
      <el-form ref="editForm" style="margin-right: 20px;" :model="form" :inline="true" label-position="right" label-width="110px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

data部分：

 form: {},
 isEdit: true, // 是否编辑
 dialogEditVisible: false,
 images: []

效果图：
到这一步我们就完成了弹框的编写，并且实现了弹框的效果，但是，这个弹框会给用户不好的体验，因为这个遮罩层在弹框上面，这样的话，用户就要先点击一个屏幕，然后才能录入数据，具体的解决办法看下面
解决办法：
只要加上图片中划线部分的代码就能够完美的解决遮罩层在弹框层上面了
最终效果图：

我们已经完成了弹框层的编写，用户体验也不差！
一个刚刚踏入程序员道路的菜鸟第一次写的博客，希望大家不吝赐教！
（完）