ElementUI的基本使用

最新推荐文章于 2024-04-30 10:40:48 发布
最新推荐文章于 2024-04-30 10:40:48 发布
阅读量497 收藏 8
点赞数 8
文章标签： elementui vue.js javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44144773/article/details/137907704
版权

ElementUI的使用

  1. 直接使用HTML构建

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 导入Vue3 -->
    <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
                }
            }
        }).mount('#app').use(ElementPlus);
    </script> -->
    <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>

    或者

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 导入Vue3 -->
    <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>

  2. 布局容器1：

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

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

    ：顶栏容器。

    ：侧边栏容器。

    ：主要区域容器。

    ：底栏容器。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 导入Vue3 -->
    <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>Header</el-header>
                <el-main>Main</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>
</body>

</html>

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

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 导入Vue3 -->
    <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 1</template>
                                <el-menu-item index="1-1">Option 1</el-menu-item>
                                <el-menu-item index="1-2">Option 2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="1-3">Option 3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>Option4</template>
                                <el-menu-item index="1-4-1">Option 4-1</el-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 1</template>
                                <el-menu-item index="2-1">Option 1</el-menu-item>
                                <el-menu-item index="2-2">Option 2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="2-3">Option 3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="2-4">
                                <template #title>Option 4</template>
                                <el-menu-item index="2-4-1">Option 4-1</el-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 1</template>
                                <el-menu-item index="3-1">Option 1</el-menu-item>
                                <el-menu-item index="3-2">Option 2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="3-3">Option 3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="3-4">
                                <template #title>Option 4</template>
                                <el-menu-item index="3-4-1">Option 4-1</el-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>View</el-dropdown-item>
                                    <el-dropdown-item>Add</el-dropdown-item>
                                    <el-dropdown-item>Delete</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <span>Tom</span>
                    </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>

  3. Layout布局：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入CSS -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 导入Vue3 -->
    <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>Header</el-header>
                <el-main>
                    <el-row>
                        <el-col :span="6">
                            <div class="mb-4"><el-button>Default</el-button></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="primary">Primary</el-button></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="info">Info</el-button></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="mb-4"><el-button type="info">Info</el-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>
神奇的布欧
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ElementUi 图片上传处理.zip
08-07
项目中使用ElementUi 框架 ，实现图片上传功能，图片需要处理，如图片格式，图片大小，图片个数等，图片删除，修改上传等，图片上传地址需要通过处理为网址，而非base64等；常用的基本功能，本栗子是通过图片空间...
elementUI基本使用总结
weixin_65100963的博客
05-14 2154
常见的vue技术栈组件库 ● 移动端（Vant, Cube-UI, NutUI ） ● PC端 （ element-ui, Ant Design of Vue, iView） ● 小程序: uniapp 组件库的基本使用流程 根据项目的实际情况，进行技术选型： 用什么技术栈，用什么组件库 去对应的官方上查文档 遇到困难时： a. 在官网上找 常见问题(一般在网页的最底部) b. 在社区/搜索引擎 找答案 c. 去提issue ，面对面直接向组件的作者提问 d. 改源码 小结 ● vue技术栈有很
ElementUI基本使用(一)
qq_22161527的博客
04-25 2502
单选框 vue路由跳转： 日期做字段使用，指定format 下拉选择框 文件树状结构 自定义树状结构 删除数组对象中的一个元素splice 单选框 label值为string类型，后台传int需要处理 <el-form-item label="性别:" class="infoItem"> <el-radio-group v-model="add...
vue+ElementUI基本使用 数据的增删改查
kksw1121
06-10 2870
使用vue+elementUI实现基本的增删改查 <template> <div class="container"> <el-row :gutter="20"> <el-col :span="8"> <h3 style="margin-left:30px">{{isEdit?'第'+(index+1)+'条信息编辑':'信息添加'}}</h3> <el-form ref="
elementUI 的基本使用
Luzhangfeng的博客
05-05 599
elementUI 的基本使用 项目本地安装 element-ui $ npm install element-ui -S 在 main.js 文件中引入 UI 库核心模块与它的样式 import Vue from 'vue' import App from './App.vue' // 引入 element-ui 和 它的样式文件 import ElementUi from 'ele...
07，elementui介绍和基本使用
w7635122886的博客
01-17 1086
elementui介绍和基本使用
使用springboot+mybatis+Vue2.0+elementUI实现简单的登录注册及用户信息获取。
07-09
本demo适合刚入门学习SpringBoot及Vue的小伙伴，要求...阅读建议：安装好Vue及相关的elementUI、axios等环境，会使用vueCli及springboot初始化项目，能将项目跑起来，直接看到效果。 有问题随时私信联系哦！一起交流。
电脑端ElementUI——80.zip
11-22
elementUI官方没有提供完整的axcure组件库，使得画axcure无法参照elementUI组件的基本样式。axcure资源库买的元素库，分享出来
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
vue-calendar.rar-Vue -ElementUI 日历控件-考勤日历表
01-13
适合做考勤 日历表 可以让某些日期呈现各种不同的颜色...以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
el-table-column 表格列自适应宽度的组件封装说明
前端，请指教
04-27 350
针对组件业务上的需求，需要给 el-table-column 加上限制，需保证表头在一行展示，部分列的内容要一行展示，自适应单项列的宽度；
vue elementui el-table 表格里边展示四分位图
Z18834071903的博客
04-25 1222
vue elementui el-table 表格里边展示四分位图
vue 实现左侧导航栏，右侧锚点定位滚动到指定位置（超简单方法）
chensi_07的博客
04-24 526
通过scrollIntoView方法可以把元素滚动到可视区域内。behavior: "smooth"是指定滚动方式为平滑效果。点击左侧菜单根据元素id定位到可视内容区域。浏览器原生提供了一种方法。
elment-table实现行滚动效果
那片枫叶~
04-24 447
通过获取dom ，来控制表格滚动。
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
Li_Ning21的博客
04-27 317
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible。
Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件
最新发布
单飞吧的博客
04-30 267
弹窗组件中自定义了表头增加了全屏，svg-icon 没有的话可能会报错，换成自己的图标就可以。
vue elementui 结合 el-checkbox-group 组件实现全选效果
Z18834071903的博客
04-24 687
vue elementui 结合 el-checkbox-group 组件实现全选效果
02 spring-boot+mybatis+elementui 的登录,文件上传,增删改查的入门级项目
970655147的专栏
04-27 251
主要是来自于 朋友的需求。
动态增删表格
Leeyy
04-28 211
{{ getMemberIndex(scope.$index) }}
elementui怎么使用
10-11
以下是使用 ElementUI 的基本步骤： 1. 安装 ElementUI：可以通过 npm 或 yarn 安装，具体命令如下： ``` npm install element-ui --save 或 yarn add element-ui ``` 2. 在 main.js 中引入 ElementUI： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神奇的布欧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值