1.新建彈窗Form.vue文件 將visible屬性設置爲true
<template>
<div>
<el-dialog title="提示" :visible="true" width="500px" @close="closeDlg" center>
<el-row :gutter="24">
<el-col :span="24">
<el-form status-icon :model="form" :rules="rules" ref="elform" label-width="181px">
<el-form-item label="類型:" prop="dicEntpollutanttype">
<el-select size="small" @change="Pollutanttype" v-model="form.dicEntpollutanttype" placeholder="請選擇級別" v-if="status=='add' || status=='edit'">
<el-option v-for="item in localWord.majorPollutants" :key="item.code" :label="item.codename" :value="item.pkCodenum">
</el-option>
</el-select>
<span v-else>{{form.dicEntpollutanttypeStr}}</span>
</el-form-item>
<el-form-item label="污染物名稱:" prop="pollutantname">
<!-- <el-input size="small" v-model="form.pollutantname" placeholder="請輸入污染物名稱" v-if="status=='add' || status=='edit'"></el-input> -->
<el-select size="small" v-model="form.pollutantname" placeholder="請輸入污染物名稱" v-if="status=='add' || status=='edit'">
<el-option v-for="item in classification" :key="item.pkCodenum" :label="item.codename" :value="item.pkCodenum"></el-option>
</el-select>
<span v-else>{{form.pollutantname}}</span>
</el-form-item>
<el-form-item :label="emissionConcentration" prop="concentration">
<el-input size="small" v-model="form.concentration" placeholder="請輸入排放濃度" v-if="status=='add' || status=='edit'"></el-input>
<span v-else>{{form.concentration}}</span>
</el-form-item>
<el-form-item label="生產量(噸/年):" prop="produceamount">
<el-input size="small" placeholder="請填寫產生量" v-model="form.produceamount" style="width: 100%;" v-if="status=='add' || status=='edit'"></el-input>
<span v-else>{{form.produceamount}}</span>
</el-form-item>
<el-form-item label="環保措施削減量(噸/年):" prop="environmentcontroldecrement">
<el-input size="small" placeholder="請填寫環保措施削減量" v-model="form.environmentcontroldecrement" style="width: 100%;" v-if="status=='add' || status=='edit'"></el-input>
<span v-else>{{form.environmentcontroldecrement}}</span>
</el-form-item>
<el-form-item label="排放量(噸/年):" prop="emission">
<el-input size="small" placeholder="請填寫排放量" v-model="form.emission" style="width: 100%;" v-if="status=='add' || status=='edit'"></el-input>
<span v-else>{{form.emission}}</span>
</el-form-item>
<el-row :gutter="24" :style="{textAlign:'center'}">
<el-col :span="24">
<el-form-item align="center" v-if="status=='add' || status=='edit'">
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
<el-button @click="closeDlg" size="small">取消</el-button>
</el-form-item>
<el-form-item align="center" v-else>
<el-button type="primary" size="small" @click="closeDlg">關閉</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
2.定義關閉彈窗方法closeDlg
closeDlg() {
this.$router.back();
}
3.在父組件中定義彈窗按鈕
<div class="right add" @click="add">
</div>
4.定義彈窗方法add
add() {
this.$router.push({
name: "pollutantsform"
});
}
通過路由的方式將頁面顯示出來,彈窗默認是打開的 visible:true 打開頁面從而也就打開了彈窗,關閉彈窗是通過this.$router.back的方式關閉的。