ElementUI入门

最新推荐文章于 2024-10-06 20:22:50 发布

明月常新

最新推荐文章于 2024-10-06 20:22:50 发布

阅读量1.3k

点赞数 1

分类专栏： java随笔记基础文章标签： intellij-idea 前端 es6 elementui

本文链接：https://blog.csdn.net/weixin_45905210/article/details/121409194

版权

本文介绍了ElementUI的常用组件，包括Container布局容器、Dropdown下拉菜单、NavMenu导航菜单、Table表格、Pagination分页、Message消息提示、Tabs标签页和Form表单。详细讲解了各组件的功能和应用场景，如Dropdown的多种激活方式，Table的列表展示和表单的验证功能。

摘要由CSDN通过智能技术生成

文章目录

ElementUI

ElementUI

常用组件
（1）Container布局容器（用于页面布局）
（2）Dropdown下拉菜单（用于首页退出菜单）
（3）NavMenu导航菜单（用于左侧菜单）
（4）Tabel表格（用于列表展示）
（5）Pagination分页（用于列表分页展示）
（6）Message消息提示（用于保存、修改、删除的时候成功或失败提示）
（7）Tabs标签页（用于一个页面多个业务功能）
（8）Form表单（新增、修改时的表单，及表单验证）

入门案例：
<!DOCTYPE html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <!-- import CSS -->
	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	
	<body>
	  <div id="app">
	    <el-button @click="fun">Button</el-button>
	    <el-dialog :visible.sync="visible" title="Hello world">
	      <p>尚硅谷</p>
	    </el-dialog>
	  </div>
	</body>

	  <!-- import Vue before Element -->
	  <script src="https://unpkg.com/vue/dist/vue.js"></script>
	  <!-- import JavaScript -->
	  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	  
	  <script>
	    new Vue({
   
	      el: '#app',
	      data: {
   
	        visible: false 
	      },
	      methods:{
   
	      	 fun:function(){
   
	      	 	this.visible = true
	      	 }
	      	 
	      }
	    })
	  </script>
  
</html>

常用组件

Container 布局容器

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

在这里插入图片描述
：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列
：顶栏容器
：侧边栏容器
：主要区域容器
：底栏容器

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

    .el-aside {
   
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

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

    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;
    }
</style>
<body>
    <div id="app">
        <el-container>
            <el-header>
                标题
            </el-header>
            <el-container>
                <el-aside width="200px">
                    菜单
                </el-aside>
                <el-container>
                    <el-main>
                        功能区域
                    </el-main>
                    <el-footer>
                        底部
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
</html>
<script>
    new Vue({
   
        el:"#app"
    })
</script>

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。
• 方式一：hover激活事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
    .el-dropdown-link {
   
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
   
        font-size: 12px;
    }
</style>
<body>
    <div id="app">
        <el-dropdown>
            <span class