Element中Dialog组件的使用

        最近接触的项目前端使用的是Element和vue.js，在其中使用到了Dialog组件。在使用过程中遇到了许多问题，网上的解答虽然有，但是很多并不能解决我的问题。所以在此我记录下我遇到的一些问题以及解决方法。

首先是Dialog组件的显示以及关闭操作，代码如下：

<el-button type="primary" icon="el-icon-refresh" @click="showAdd()">添加</el-button>
 <el-button type="primary" icon="el-icon-refresh" @click="showModify()" :disabled="grid.selectedCount===0">修改</el-button>
            


<el-dialog title="添加" :visible.sync="addDialogVisible"  :modal-append-to-body="false" >
                <el-form :model="grid">
                    <el-form-item label="中文名称" >
                        <el-input v-model="grid.dsName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="模型名" >
                        <el-input v-model="grid.modelCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图片高度" >
                        <el-input v-model="grid.imageHeight" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图片宽度" >
                        <el-input v-model="grid.imageWidth" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="图片位数" >
                        <el-input v-model="grid.imageChannels" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </div>
            </el-dialog>

<el-dialog title="修改" :visible.sync="modifyDialogVisible"  :modal-append-to-body="false" >
                <el-form :model="grid">
                    <el-form-item label="中文名称" >
                        <el-input v-model="grid.dsName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="模型名" >
                        <el-input v-model="grid.modelCode" autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="图片高度" >
                        <el-input v-model="grid.imageHeight" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图片宽度" >
                        <el-input v-model="grid.imageWidth" autocomplete="off"  ></el-input>
                    </el-form-item>

                    <el-form-item label="图片位数" >
                        <el-input v-model="grid.imageChannels" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="modifyDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify">确 定</el-button>
                </div>
            </el-dialog>

这里的话是HTML代码。

 

var grid = {
            autoFit: true,
            showQueryBlocking: true,
            quickText: '',
            queryUrl: '/verificationCode/getVerificationCodeList',
            columnDefs: [
                {field: 'dsName', headerName: '中文名称', width: 300, filter: 'text'}
                , {field: 'modelCode', headerName: '模型名', width: 200, filter: 'text'}
                , {field: 'imageHeight', headerName: '图片高度', width: 100, filter: 'text'}
                , {field: 'imageWidth', headerName: '图片宽度', width: 100, filter: 'text'}
                , {field: 'imageChannels', headerName: '图片位数', width: 100, filter: 'text'}
            ],
            onResponseData: function (resp) {
                formList = resp;
            },
            agGrid: {
                singleClickEdit: false,
                onCellEditingStarted: function (evt) {
                    if (evt.data.addNew || evt.colDef.field === 'formName') {
                        return;
                    }
                    evt.api.stopEditing();
                }
            }
        };


function add() {


            var obj = {dsName:this.grid.dsName,modelCode:this.grid.modelCode,
                imageWidth:this.grid.imageWidth,imageHeight:this.grid.imageHeight,
                imageChannels:this.grid.imageChannels};
            verificationCodeService.addVerificationCode(obj);
            // this.addDialogVisible = false;
            var that = this;
            setTimeout(function () {
                that.addDialogVisible = false;
                grid.api.reloadData();
            },500);
        }

        function showAdd() {
            this.grid.dsName = null;
            this.grid.modelCode = null;
            this.grid.imageHeight = null;
            this.grid.imageWidth = null;
            this.grid.imageChannels = null;
            this.addDialogVisible = true;
        }

        function modify() {

            var obj = {dsName:this.grid.dsName,modelCode:this.grid.modelCode,
                imageWidth:this.grid.imageWidth,imageHeight:this.grid.imageHeight,
                imageChannels:this.grid.imageChannels};
            verificationCodeService.updateVerificationCode(obj);
            var that = this;
            setTimeout(function () {
                that.modifyDialogVisible = false;
                grid.api.reloadData();
            },500);

        }

        function showModify() {
            var rows = grid.api.getSelectedNodes();
            if (rows.length < 1) {
                return;
            }
            var data = rows[0].data;
            this.grid.dsName = rows[0].data.dsName;
            this.grid.modelCode = rows[0].data.modelCode;
            this.grid.imageHeight = rows[0].data.imageHeight;
            this.grid.imageWidth = rows[0].data.imageWidth;
            this.grid.imageChannels = rows[0].data.imageChannels;
            this.modifyDialogVisible = true;
        }

vm.method('showAdd', showAdd);
        vm.method('add', add);
        vm.method('showModify', showModify);
        vm.method('modify', modify);

vm.data = {
            grid: grid,
            addDialogVisible : false,
            modifyDialogVisible : false,
            constData: {
                actList: []
            }
        };

这里是JavaScript代码，这里实现的操作是点击修改按钮弹出修改弹框，点击增加按钮弹出增加弹框。这里需要注意的几个点是

1，Dialog组件是通过其:visible.sync属性来控制弹框的显示和隐藏，true为显示弹框，false为隐藏弹框。

2，基于第1点几个同时存在的Dialog组件的显示和隐藏可以通过:visible.sync的不同的属性名来进行控制，实质上起到了js中的id的作用

3，Dialog组件的:modal-append-to-body的属性设置为false时可以将弹框固定在黑色遮蔽罩上，不会被其遮蔽。