elementUI + vue + 直接引用vue和element css和js 菜單組件遞歸

時間 2019-11-17

標籤 elementui vue 直接引用 element css 菜單組件遞歸欄目 CSS 简体版

原文原文鏈接

<html>

<head>
    <title>element-ui demo</title>
    <meta charset="UTF-8">

    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
    <div id="app">
        <el-row class="tac">
            <el-col>
                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <menutree :data="menu_data"></menutree>
                </el-menu>
            </el-col>            
        </el-row>
    </div>

    <template id="menutree">
        <div>
            <label v-for="menu in data" :key="menu.index">
                <el-submenu :index="menu.index" v-if="menu.children">
                    <template slot="title">
                        <span>{{menu.name}}</span>
                    </template>
                    <label>
                        <menutree :data="menu.children"></menutree>
                    </label>
                </el-submenu>
                <el-menu-item v-else :index="menu.index">
                    <span slot="title">{{menu.name}}</span>
                </el-menu-item>
            </label>
        </div>
    </template>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>

        new Vue({
            el: '#app',
            data: function () {
                return {
                    visible: false,
                    menu_data: [{
                        "index": "1",
                        "name": "用戶管理",
                        "children": [{
                            "index": "1-2",
                            "name": "用戶列表",
                            "children": [{
                                "index": "1-2-1",
                                "name": "用戶列表查詢",
                                "children": [{
                                    "index": "1-2-1-1",
                                    "name": "用戶列表查詢",
                                    "children": [{
                                        "index": "1-2-1-1-1",
                                        "name": "用戶列表查詢",
                                        "children": [{
                                            "index": "1-2-1-1-1-1",
                                            "name": "用戶列表查詢"
                                        }]
                                    }]
                                }]

                            }]
                        }]
                    }, {
                        "index": "2",
                        "name": "角色管理"
                    }, {
                        "index": "3",
                        "name": "用戶管理"
                    }, {
                        "index": "4",
                        "name": "角色管理"
                    }]
                }
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            },
            components: {
                menutree: {
                    template: '#menutree',
                    props: ['data'],
                    name:'menutree'
                }
            }
        })
    </script>
</body>

</html>

網上幾乎都是模塊化(.vue後綴的文件)開發的,感受前端這些有些高端,網很差,好像是用命令行弄環境和打包什麼的,以爲很麻煩,搞不懂那些,就有點小排斥css

不知道還有沒有和我同樣的,就當記錄一下,畢竟連查帶本身copy別人的代碼,搞出來也花了3個小時,心碎了html