如何使用Vue.js和ElementUI实现弹窗点击不关闭

1、问题背景
有一个表格，可以对其进行增删改查。新增和编辑共用一个窗口，输入内容完毕后，点击保存提交数据到后台；但是，打开弹窗后，点击遮罩层，会自动关闭窗口，不利于用户使用。

2、实现源码

<template>
  <el-row :gutter="20">
    <el-col :span="24" style="text-align: left;">
      <el-form ref="searchForm" size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="学号" prop="sno">
          <el-input type="text" v-model="searchForm.sno" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="sname">
          <el-input type="text" v-model="searchForm.sno" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="sage">
          <el-input type="text" v-model="searchForm.sage" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button type="reset" @click="resetData">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12">
      <el-button type="primary" icon="el-icon-plus" style="float:right;margin-bottom:10px;" size="small" @click="addData">新增</el-button>
      <el-table :data="stuData" style="width: 100%" border stripe>
        <el-table-column prop="sno" label="学号" min-width="180" align="center"></el-table-column>
        <el-table-column prop="sname" label="姓名" min-width="180" align="center"></el-table-column>
        <el-table-column prop="ssex" label="性别" min-width="180" align="center"></el-table-column>
        <el-table-column prop="sage" label="年龄" min-width="180" align="center"></el-table-column>
        <el-table-column label="操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="editData(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :current-page="current"
        :total="total">
      </el-pagination>
    </el-col>
    <el-col :span="12">
      <el-button type="primary" icon="el-icon-plus" style="float:right;margin-bottom:10px;" size="small" @click="addData">新增</el-button>
      <el-table :data="stuData" style="width: 100%" border stripe>
        <el-table-column prop="sno" label="学号" min-width="180" align="center"></el-table-column>
        <el-table-column prop="sname" label="姓名" min-width="180" align="center"></el-table-column>
        <el-table-column prop="ssex" label="性别" min-width="180" align="center"></el-table-column>
        <el-table-column prop="sage" label="年龄" min-width="180" align="center"></el-table-column>
        <el-table-column label="操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="editData(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :current-page="current"
        :total="total">
      </el-pagination>
    </el-col>
    <el-dialog :title="title" :visible.sync="editVisible" width="400px">
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
        <el-form-item label="学号" prop="sno">
          <el-input type="text" v-model="editForm.sno" maxlength="12" show-word-limit :disabled="editForm.disabled"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="sname">
          <el-input type="text" v-model="editForm.sname" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="ssex">
          <el-radio-group v-model="editForm.ssex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="sage">
          <el-input type="number" v-model="editForm.sage" maxlength="3" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="sloading" @click="saveData()">
          保存
        </el-button>
        <el-button @click="editVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        current:1,
        total:0,
        size: 10,
        sloading: false,
        title: '新增',
        stuData: [{
          sno: '201901001',
          sname: 'A1',
          ssex: '女',
          sage: '20'
        }, {
          sno: '201901002',
          sname: 'A2',
          ssex: '男',
          sage: '20'
        }, {
          sno: '201901003',
          sname: 'A3',
          ssex: '女',
          sage: '20'
        }, {
          sno: '201901004',
          sname: 'A4',
          ssex: '男',
          sage: '20'
        }, {
          sno: '201901005',
          sname: 'A5',
          ssex: '女',
          sage: '20'
        }, {
          sno: '201901006',
          sname: 'A6',
          ssex: '男',
          sage: '20'
        }, {
          sno: '201901007',
          sname: 'A7',
          ssex: '女',
          sage: '20'
        }, {
          sno: '201901008',
          sname: 'A8',
          ssex: '男',
          sage: '20'
        }, {
          sno: '201901009',
          sname: 'A9',
          ssex: '女',
          sage: '20'
        }],
        searchForm: {
          sno: '',
          sname: '',
          sage: ''
        },
        editVisible: false,
        editForm: {
          sno: '',
          sname: '',
          ssex: '',
          sage: '',
          disabled: false
        },
        rules: {
          sno: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }],
          sname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          ssex: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }],
          sage: [{
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
          }]
        }
      }
    },
    mounted(){
      this.initData()
    },
    methods: {
      initData() {
        this.current = 1
        this.total = this.stuData.length
      },
      searchData() {

      },
      resetData() {

      },
      addData() {
        this.editVisible = true
        this.title = "新增"
        this.editForm.sno = ''
        this.editForm.sname = ''
        this.editForm.ssex = ''
        this.editForm.sage = ''
        this.editForm.disabled = false
      },
      editData($index, $row) {
        this.editVisible = true
        this.title = "修改"
        this.editForm.sno = $row.sno
        this.editForm.sname = $row.sname
        this.editForm.ssex = $row.ssex
        this.editForm.sage = $row.sage
        this.editForm.disabled = true
      },
      saveData() {
        this.sloading = true
        var obj = {
          sno: this.editForm.sno,
          sname: this.editForm.sname,
          ssex: this.editForm.ssex,
          sage: this.editForm.ssex
        }
        if(this.title == '新增') {
          this.stuData.push(obj)
          this.editVisible = false
        } else {
          this.sloading = false
        }
      },
      deleteData($index, $row) {
        this.$confirm(`您确定要将这条记录删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'btn-custom-cancel',
          type: 'warning'
        }).then(() => {
          this.stuData.splice($index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
</script>

<style scoped>
  span.el-dialog__title{
      text-align: left;
  }
</style>

3、解决办法
在弹窗添加一个属性:close-on-click-modal="false"，这样点击遮罩层不会被关闭，只有单击关闭按钮或关闭图标关闭窗口

4、实现效果