ElementUI的基本使用

ElementUI的使用

直接使用HTML构建

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./css/index.css" />
    
    <script src="./js/vue.global.js">script>
    
    <script src="./js/index.full.js">script>
head>

<body>
    <div id="app">
        <el-button>{{ message }}el-button>
    div>
    
    <script>
        const { ref } = Vue
        const App = {
            setup() {
                const message = ref('神奇的布欧')
                return {
                    message
                }
            },
        };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

或者

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./css/index.css" />
    
    <script src="./js/vue.global.js">script>
    
    <script src="./js/index.full.js">script>
head>

<body>
    <div id="app">
        <el-button>{{ message }}el-button>
    div>
    <script type="module">
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const message = ref('神奇的布欧')
                return {
                    message
                }
            }
        }).use(ElementPlus).mount('#app')
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

布局容器1：

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./css/index.css" />
    
    <script src="./js/vue.global.js">script>
    
    <script src="./js/index.full.js">script>
head>

<body>
    <div id="app">
        <div class="common-layout">
            <el-container>
                <el-header>Headerel-header>
                <el-main>Mainel-main>
            el-container>
        div>
    div>
    <script>
        const { ref } = Vue
        const App = {
            setup() {
                const message = ref('神奇的布欧')
                return {
                    message
                }
            },
        };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

布局容器2：（导入图标库！）

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./css/index.css" />
    
    <script src="./js/vue.global.js">script>
    
    <script src="./js/index.full.js">script>
    
    <script src="./js/index.iife.min.js">script>
head>

<body>
    <div id="app">
        <el-container class="layout-container-demo" style="height: 500px">
            <el-aside width="200px">
                <el-scrollbar>
                    <el-menu :default-openeds="['1', '3']">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <message />
                                el-icon>Navigator One
                            template>
                            <el-menu-item-group>
                                <template #title>Group 1template>
                                <el-menu-item index="1-1">Option 1el-menu-item>
                                <el-menu-item index="1-2">Option 2el-menu-item>
                            el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="1-3">Option 3el-menu-item>
                            el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>Option4template>
                                <el-menu-item index="1-4-1">Option 4-1el-menu-item>
                            el-sub-menu>
                        el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><icon-menu />el-icon>Navigator Two
                            template>
                            <el-menu-item-group>
                                <template #title>Group 1template>
                                <el-menu-item index="2-1">Option 1el-menu-item>
                                <el-menu-item index="2-2">Option 2el-menu-item>
                            el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="2-3">Option 3el-menu-item>
                            el-menu-item-group>
                            <el-sub-menu index="2-4">
                                <template #title>Option 4template>
                                <el-menu-item index="2-4-1">Option 4-1el-menu-item>
                            el-sub-menu>
                        el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <setting />
                                el-icon>Navigator Three
                            template>
                            <el-menu-item-group>
                                <template #title>Group 1template>
                                <el-menu-item index="3-1">Option 1el-menu-item>
                                <el-menu-item index="3-2">Option 2el-menu-item>
                            el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="3-3">Option 3el-menu-item>
                            el-menu-item-group>
                            <el-sub-menu index="3-4">
                                <template #title>Option 4template>
                                <el-menu-item index="3-4-1">Option 4-1el-menu-item>
                            el-sub-menu>
                        el-sub-menu>
                    el-menu>
                el-scrollbar>
            el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <div class="toolbar">
                        <el-dropdown>
                            <el-icon style="margin-right: 8px; margin-top: 1px">
                                <setting />
                            el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>Viewel-dropdown-item>
                                    <el-dropdown-item>Addel-dropdown-item>
                                    <el-dropdown-item>Deleteel-dropdown-item>
                                el-dropdown-menu>
                            template>
                        el-dropdown>
                        <span>Tomspan>
                    div>
                el-header>

                <el-main>
                    <el-scrollbar>
                        <el-table :data="tableData">
                            <el-table-column prop="date" label="Date" width="140" />
                            <el-table-column prop="name" label="Name" width="120" />
                            <el-table-column prop="address" label="Address" />
                        el-table>
                    el-scrollbar>
                el-main>
            el-container>
        el-container>
    div>
    <script>
        const { ref } = Vue
        const App = {
            setup() {
                const item = {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                }
                const tableData = ref(Array.from({ length: 20 }).fill(item))
                return {
                    item,
                    tableData
                }
            },
        };
        const app = Vue.createApp(App);
        // 添加全部组件
        for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
			app.component(name, comp);
		}
        app.use(ElementPlus);
        app.mount("#app");
    script>
    <style scoped>
        .layout-container-demo .el-header {
            position: relative;
            background-color: var(--el-color-primary-light-7);
            color: var(--el-text-color-primary);
        }

        .layout-container-demo .el-aside {
            color: var(--el-text-color-primary);
            background: var(--el-color-primary-light-8);
        }

        .layout-container-demo .el-menu {
            border-right: none;
        }

        .layout-container-demo .el-main {
            padding: 0;
        }

        .layout-container-demo .toolbar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            right: 20px;
        }
    style>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

Layout布局：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./css/index.css" />
    
    <script src="./js/vue.global.js">script>
    
    <script src="./js/index.full.js">script>
head>

<body>
    <div id="app">
        <div class="common-layout">
            <el-container>
                <el-header>Headerel-header>
                <el-main>
                    <el-row>
                        <el-col :span="6">
                            <div class="mb-4"><el-button>Defaultel-button>div>
                        el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="primary">Primaryel-button>div>
                        el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="info">Infoel-button>div>
                        el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="info">Infoel-button>div>
                        el-col>
                    el-row>
                el-main>
            el-container>
        div>
    div>
    <script>
        const { ref } = Vue
        const App = {
            setup() {
                const message = ref('神奇的布欧')
                return {
                    message
                }
            },
        };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    script>
    <style lang="scss">
        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .el-col {
            border-radius: 4px;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    style>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

相关阅读:
Hifiasm-meta | 你没看错！基于宏基因组的完成图！！
【spark】join异常分析（逻辑问题）
【华为OD机试真题 python】完全二叉树非叶子部分后序遍历-2【2022 Q4 | 200分】
vue3基础
 springboot @Scheduled和@Async
ElasticSearch快速入门
 MySQL - 全文索引
 React进阶
 计算机毕业设计基于SpringBoot的私人西服定制系统的设计与实现 Java实战项目附源码+文档+视频讲解
 javascript：Array.prototype.reduce()的使用场景
原文地址：https://blog.csdn.net/weixin_44144773/article/details/137907704