vue 使用layui彈框彈出element-ui表單的問題

1、layui的引入    publid/index.html

 2、element-ui引入

import ElementUI from 'element-ui'    main.js     

 

3、彈框的使用   例如

 

 彈出一個用戶管理的信息， 用戶管理的信息使用的是element-ui的表單組件userForm.vue

<el-form ref="form" :model="form" :rules="rules" label-width="160px">
            <el-form-item label="用戶名" prop="userName">
                <el-input v-model="form.userName" size="mini" clearable class="formInputClass" @blur="showMsg=false" @focus="showMsg=true"></el-input>
            </el-form-item>
            <div class="msg layui-anim layui-anim-scaleSpring " v-show="showMsg">
                <span><i class="layui-icon layui-icon-tips"></i>系統會默認給用戶名加上企業前綴,請適用系統生成的用戶名登錄</span>
            </div>
            <el-form-item label="用戶密碼" prop="password">
                <el-input type="password" v-model="form.password" size="mini" clearable class="formInputClass"></el-input>
            </el-form-item>
            <el-form-item label="確認密碼" prop="passwordOnce">
                <el-input type="password" v-model="form.passwordOnce" size="mini" clearable class="formInputClass"></el-input>
            </el-form-item>
            <el-form-item label="企業" prop="relateEnterpriseName">
                <el-input v-model="form.relateEnterpriseName" size="mini" clearable class="formInputClass" disabled></el-input>
            </el-form-item>
            <el-form-item label="角色選擇" prop="roleId">
                <el-select v-model="form.roleId" placeholder="請選擇" size="mini" filterable clearable  class="formInputClass">
                    <el-option v-for="(item, key) in roleOptions" :key="key" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <div class="btn">
                <el-button @click="checkParams" type="primary">提交</el-button>
            </div>
        </el-form>

內容無關緊要。

user.vue   用戶管理的頁面，在這里彈出表單彈框

 <!-- 表單 -->
 <UserForm id="UserForm" slot="content" ref="UserFormRef" @update="update" :roleOptions="roleOptions" class="layui-anim layui-anim-fadein" style="display:none" />

userForm組件引入，默認不顯示。

配置彈框顯示的函數x_admin_show()

export function x_admin_show(title, url, w, h) {
    $ = layui.jquery;
    let layerindex = '';
    layer.open({
        type: 1,
        area: [w + 'px', h + 'px'],
        fix: false, //不固定
        maxmin: true,
        shadeClose: true,
        shade: 0.0,
        closeBtn: 1,
        title: title,
        content: url, //指向彈出層子頁面的鏈接
        // shade: 0.4,   //遮罩透明度
        success: function (layero, index) {
            layerindex = index;
        },
        cancel: function (index) {
            // 你點擊右上角 X 取消后要做什么
            layer.close(index)
        },
        end: function (res) {
            // 關閉顯示
            url.css("display", 'none');
        }
    });
    return layerindex;   // 返回index用於關閉
}

引入后開始顯示彈框

import { x_admin_show } from "@/common/tool";
this.layerIndex = x_admin_show('用戶管理', $("#UserForm"), '500', '500')；// 參數分別為 標題 組件ID 寬度 高度
// this.layedIndex用於記錄layer彈框的編號  通過  layer.close(this.layerIndex); // close layer 彈出層

但是element-ui的表單下拉框這些信息可能會顯示不了，因為layer.彈框的z-index高於下拉框的z-index。如下：

解決:  app.vue 設置樣式

.el-select-dropdown,

.el-cascader__dropdown,

.el-notification,

.el-message {

    z-index: 2147483647 !important;

}