ElementでのDialogコンポーネントの使用

最近接触したプロジェクトの先端にはElementとvueが使用されている.jsは、Dialogコンポーネントを使用しています.使用中に多くの問題が発生し、ネット上の解答はありますが、私の問題を解決することはできません.だからここで私が出会ったいくつかの問題と解決方法を記録します.
まず、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に設定されている場合は、フレームを黒いマスクに固定し、マスクされません.