版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/qq_36978506/article/details/88846825
最近接触的项目前端使用的是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时可以将弹框固定在黑色遮蔽罩上，不会被其遮蔽。