vue 彈窗

按鈕

 <div class="xe-addbtn-panel">
    <el-button type="primary" @click="addCapacity">新增運力池</el-button>
 </div>
 <el-button @click.native.prevent="edit(scope.row)" type="text" size="small">編輯</el-button>

點擊按鈕顯示窗口

addCapacity() {
   this.formVisible = true;
    this.dialogTitle = '新增運力池';
},
edit(scope) {
    let id = scope.id;
    this.dialogTitle = '編輯運力池';
    let _this = this;
    _this.$http({
        method: 'POST',
        url: getHomeProjectLink().rmcApiBaseUrl + `/page/rmc/transpool/main/xxxx/${id}`
    }).then((res) => {
        console.log(res);
        _this.formVisible = true;
        _this.capacityForm = {
            'name': res.result.name,
            'effectiveTime': res.result.effectiveTime,
            'description': res.result.description,
            'id': id
        };
    }).catch((err) => {
        console.log(err);
    });
},
submitCapacity(form) {
this.$refs[form].validate((valid) => {
    if (valid) {
        let _this = this;
        if (_this.capacityForm.id === '') {
            _this.$http({
                method: 'POST',
                url: getHomeProjectLink().rmcApiBaseUrl + '/page/rmc/transpool/add/xxx',
                data: _this.capacityForm
            }).then((res) => {
                _this.formVisible = false;
                _this.queryData();
            }).catch((err) => {
                console.log(err);
            });
        } else {
            _this.$http({
                method: 'POST',
                url: getHomeProjectLink().rmcApiBaseUrl + '/page/rmc/transpool/modify/xxxx',
                data: _this.capacityForm
            }).then((res) => {
                _this.formVisible = false;
                _this.queryData();
            }).catch((err) => {
                console.log(err);
            });
        }
    }
});

窗體 html

<el-dialog title="窗口名稱" :visible.sync="formVisible" @close="resetCapacity('capacityForm')" class="capacity">
            <el-form :model="capacityForm" :label-width="xeLabelWidth" ref="capacityForm" :rules="capacityRules">
                <el-form-item label="運力池" prop="name">
                    <el-input v-model.trim="capacityForm.name" class="xe-input3-col3"></el-input>
                </el-form-item>
                <el-form-item label="鎖定時間(分鐘)" prop="effectiveTime">
                    <el-input v-model.trim="capacityForm.effectiveTime" class="xe-input3-col3"></el-input>
                </el-form-item>
                <el-form-item label="描述信息" prop="description">
                    <el-input type="textarea" v-model.trim="capacityForm.description" class="xe-input3-col3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCapacity('capacityForm')">確 定</el-button>
            </div>
        </el-dialog>

備註

visible.sync 爲true 就顯示窗口 false關閉窗口 
@close="resetCapacity('capacityForm')"  關閉的時候要重置表單