• 弹出层element ui


    <template>
    <div class="mat_addcompt">
    <el-dialog
    :visible.sync="visible"
    :show-close="false"
    width="1000px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    class="add"
    >
    <h2 slot="title">
    <template >添加设置</template>
    </h2>
    <button
    type="button"
    aria-label="Close"
    class="el-dialog__headerbtn"
    @click.stop="cancelModal"
    >
    <i class="close"></i>
    </button>
    <!-- 表格具体内容-->
    <div>
    qwewr
    </div>
     
    <div slot="footer" class="buttons-wrap">
    <el-button type="primary" @click="">保存</el-button>
    <el-button type="primary" @click="cancelModal()">取消</el-button>
    </div>
    </el-dialog>
    </div>
    </template>
    <script>
    import httpApi from "@/api/config.js";
    export default {
    name: "SettingComponent",
    props: {
    visible: { type: Boolean, default: false },
     
    },
    data() {
    return {
     
    };
    },
    mounted() {
     

     
    },
    //创建之前
    created() {
     
    },
    //加了keepalive <component :is="组件名字"></component>
    activated() {},
    //监听
    watch: {
    //发生改变 才会执行这个函数
    currentRow() {}
    },
    methods: {
     
    cancelModal() {
    // 关闭弹窗,触发父组件修改visible值
    this.$emit("update:visible", false);
     
    },
     
    }
    };
    </script>
    <style scoped lang='scss'>
    .el-dialog__header /deep/ h2 {
    margin-top: 12px;
    font-weight: bold;
    }

    </style>
    <button @click="add">新增</button>
    父<ImportAddComponent :visible.sync="addIsShow"></ImportAddComponent>

    <script>

    import ImportAddComponent from "./BedutyImport_addcomponen";
    import api from "@/api/config";
    export default {
    name: "BedutyDaily",
    components: { ImportAddComponent },
    data() {
    return {
    addIsShow:false,
    }
    },
    methods: {
    add(){
    this.addisShow = true;
     
    }
    </script>
  • 相关阅读:
    java实现同步的两种方式
    JAVA线程概念
    XML基础总结
    JAVA使用和操作properties文件
    JAVA序列化基础知识
    easyui 在编辑状态下,动态修改其他列值。
    Activiti初学问题,求解
    java web--DOM
    java web(1)
    Java WEB
  • 原文地址:https://www.cnblogs.com/lihong-123/p/10950531.html
Copyright © 2020-2023  润新知