vue 彈出框 引入另一個vue頁面的示例代碼
更新時間:2023年08月23日 11:28:59 作者:taiguolaotu
這篇文章主要介紹了vue 彈出框引入另一個vue頁面,這種方式適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
為什么要這么做,適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯
index頁面點擊解約按鈕,彈出框 進入jieyue.vue
核心代碼
<el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.delFlag == 0" @click="jieyue(scope.row)" v-hasPermi="['sep:channel:edit']" >解約</el-button> <testDialog title="測試窗口" v-if="openDialog" ref="testDialog"/> </div> </template> <script> // 引用組件 import testDialog from "./jieyue.vue"; export default { // 注冊組件 components: {testDialog}, name: "Channel", data() { return { openDialog: false, // 按鈕方法 jieyue() { this.openDialog = true; this.$nextTick(() => { this.$refs.testDialog.init(2); }); },
代碼截圖
jieyue.vue就是常規(guī)代碼了
<template> <!-- 添加或修改個體戶渠道信息對話框 --> <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false"> <el-form ref="form" :model="form" :rules="rules" label-width="180px"> <!-- <el-form-item label="渠道編號" prop="channelNo"> <el-input v-model="form.channelNo" placeholder="請輸入渠道編號" /> </el-form-item>--> <el-form-item label="渠道商名稱" prop="channelName"> <el-input v-model="form.channelName" placeholder="請輸入渠道商名稱" /> </el-form-item> <!-- 做成一個下拉框選擇 --> <el-form-item label="上級渠道" prop="parentId"> <!-- <el-input v-model="form.parentId" placeholder="請輸入個體戶父渠道ID" /> --> <el-select v-model="form.parentId" clearable placeholder="請選擇上級渠道(無則不選)" > <el-option v-for="item in channelOption" :key="item.id" :label="item.channelName" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="返傭收款公司名稱" prop="channelRebateName" > <el-input v-model="form.channelRebateName" placeholder="請輸入渠道返傭收款公司名稱" /> </el-form-item> <el-form-item label="返傭收款公司聯(lián)系人" prop="channelLinkname"> <el-input v-model="form.channelLinkname" placeholder="請輸入渠道返傭收款公司聯(lián)系人" /> </el-form-item> <el-form-item label="返傭收款公司聯(lián)系電話" prop="channelLinkphone" > <el-input v-model="form.channelLinkphone" placeholder="請輸入渠道返傭收款公司聯(lián)系電話" /> </el-form-item> <el-form-item label="返傭收款公司聯(lián)系郵箱" prop="channelLinkmail" > <el-input v-model="form.channelLinkmail" placeholder="請輸入渠道返傭收款公司聯(lián)系郵箱" /> </el-form-item> <el-form-item label="返傭收款公司收款賬戶" prop="channelAccount" > <el-input v-model="form.channelAccount" placeholder="請輸入渠道返傭收款公司收款賬戶" /> </el-form-item> <el-form-item label="返傭收款公司開戶銀行" prop="channelBank" > <el-input v-model="form.channelBank" placeholder="請輸入渠道返傭收款公司開戶銀行" /> </el-form-item> <el-form-item label="返傭打款服務商名稱" prop="serviceId"> <el-select v-model="form.serviceId" placeholder="請選擇返傭打款服務商名稱" @change="chooseService($event)"> <el-option v-for="item in servicesOptions" :key="item.id" :label="item.serviceName" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="客戶經(jīng)理" prop="salesManagerId"> <el-select v-model="form.salesManagerId" placeholder="請選擇客戶經(jīng)理" @change="chooseManager($event)"> <el-option v-for="item in managerOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">確 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </template> <script> import { listChannel, getChannel, delChannel, addChannel, updateChannel, deactivateAccount, resetPassword, getChannelSelection, updateChannelBatch, addChannelUser, listChannelData } from '@/api/sep/channel' import { getSepEnterprise, updateSepEnterpriseData } from '@/api/sep/SepEnterprise' import { listUser,changeUserStatus } from '@/api/system/user' export default { name: "testDialog", data() { return { form: {}, //服務商list servicesOptions:[], //客戶經(jīng)理list managerOptions:[], channelOption:[], // 表單校驗 rules: { salesManagerId:[{ required: true, message: '客戶經(jīng)理不能為空', trigger: 'change' }], serviceId:[{ required: true, message: '返傭打款服務商名稱不能為空', trigger: 'change' }], channelBank:[{ required: true, message: '返傭收款公司開戶銀行不能為空', trigger: 'blur' }], channelName:[{ required: true, message: '渠道商名稱不能為空', trigger: 'blur' }], channelRebateName:[{ required: true, message: '返傭收款公司名稱不能為空', trigger: 'blur' }], channelLinkname:[{ required: true, message: '聯(lián)系人不能為空', trigger: 'blur' }], channelLinkmail:[{ required: true, message: '聯(lián)系郵箱不能為空', trigger: 'blur' }], channelLinkphone: [ // 添加正則表達式 pattern: /^1[3|5|7|8|9]\d{9}$/,驗證手機號是否正確 { required: true, message: '請輸入手機號', trigger: 'blur' }, // { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '請輸入正確的號碼格式', trigger: 'change' } ], channelAccount: [ { required: true, message: '請輸入銀行卡號', trigger: 'blur' }, // {pattern: /^([1-9])(\d{17})(\d|X)$/,message: "請輸入正確的銀行卡號",trigger: "change"} ], }, // 彈出層標題 title: "", // 是否顯示彈出層 open: false, // 表單參數(shù) bizform: {} }; }, methods: { // 窗口初始化方法,nextTick方法可以添加邏輯,如打開窗口時查詢數(shù)據(jù)填充 init(bizId) { console.log("123") this.open = true; // this.$nextTick(() => { // getById(bizId).then(response => { // this.bizform = response.data; // this.open = true; // this.title = "修改業(yè)務"; // }); // }); }, // 取消按鈕 cancel() { this.open = false; this.reset(); }, submitForm: function () { this.$refs["bizform"].validate(valid => { if (valid) { if (this.bizform.id != undefined) { updateBizDefine(this.bizform).then(response => { if (response.data) { this.msgSuccess("修改成功"); this.open = false; // 調(diào)用主頁面的getList方法刷新主頁面 this.$parent.getList(); } else { this.msgError(response.resultMsg); } }); } else { addBizDefine(this.bizform).then(response => { if (response.data) { this.msgSuccess("新增成功"); this.open = false; // 調(diào)用主頁面的getList方法刷新主頁面 this.$parent.getList(); } else { this.msgError(response.resultMsg); } }); } } }); } } }; </script>
參考資料:https://www.ibashu.cn/news/show_306835.html
到此這篇關于vue 彈出框 引入另一個vue頁面的文章就介紹到這了,更多相關vue 彈出框 另一個vue頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項
這篇文章主要介紹了解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04詳解如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權
最近參與了公司一個新的B端項目的研發(fā),從無到有搭建項目的過程中,遇到了關于項目鑒權的問題,這篇文章主要給大家介紹了關于如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權的相關資料,需要的朋友可以參考下2022-05-05vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04