Elementui el-dialog 组件我又学会了一种新的用法

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的体式格局封闭的。

    原文作者:hong10
    原文地址: https://segmentfault.com/a/1190000017369287
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞