Vue页面集成

最新推荐文章于 2024-07-03 14:50:32 发布

java后生

最新推荐文章于 2024-07-03 14:50:32 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44840242/article/details/88979533

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

main.thml主页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-footer{
            line-height: 30px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 0px;/*距离顶部位置*/
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 10px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        /*自定义
         *.el-container
         *   自适应  特别注意：有一点，否则没效果
        */
        html,body,#app,.el-container{
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        .el-main{
            padding:0px;
        }
    </style>
</head>


<body>

<div id="app">
    <el-container>

            <!--导航部-->
            <el-aside width="200px">
                <!--头像-->
               <div>
                    <img src="1.jpg" height="60px" width="100%"/>
                </div>
                <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>组织架构</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <a @click="employeeList('/employee')">员工管理</a>
                            </el-menu-item>
                            <el-menu-item index="1-2">部门管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">角色管理</el-menu-item>
                            <el-menu-item index="2-2">权限管理</el-menu-item>
                            <el-menu-item index="2-2">菜单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <!--头部-->
                <el-header >四川工商大学后台图书管理系统</el-header>

                <!--主页面-->
                <el-main>

                    <iframe id="iframe" frameborder="0"
                            width="100%" height="100%" :src="employeeUrl" >
                    </iframe>

                </el-main>

                <!--尾部-->
                <el-footer>
                    邮箱：yuandaima@itsource.cn法律顾问：北京京师(成都)律师事务所<br>
                    ®2006-2018成都源代码教育咨询有限公司 版权所有蜀ICP备14030149号-1蜀公网安备
                    510114990541站长统计
                </el-footer>
            </el-container>
        </el-container>
    </el-container>

</div>

<script>

    var employeeUrl="http://localhost:63342/vue/element/02_element.html?_ijt=pbfjj9tbuk1n7t9mfr3forcppf";
    new Vue({
        el:'#app',
        data:{
            //把后台得到的菜单地址赋值给vue的属性:在点击对应的菜单的时候绑定
            employeeUrl:""
        },
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            },
            employeeList:function (u) {
                // u赋值给iframe的src属性
                //原始的:document.getElementById("iframe").src=u;
                //我们想在点击菜单的时候才真正把这个对应的地址赋值给iframe的src
                this.employeeUrl=employeeUrl;
            }
        }
    })
</script>
</body>
</html>

#######################################################################################

数据展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
    <style>
        html,body,#app{
            padding: 0px;
            margin: 0px ;
            height: 100%;

        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 70%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="block" style="text-align: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </template>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        },
        methods:{
            handleSizeChange:function(val) {
                // 每页 ${val} 条
                var v = `${val}`;
                alert(v)
            },
            handleCurrentChange:function(val) {
                console.log(`当前页: ${val}`);
            },
            onSubmit:function() {
                console.log('submit!');
            }
        }
    })
</script>
</body>
</html>

java后生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue页面集成

main.thml主页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href...
复制链接

扫一扫

专栏目录