Element（Java后端入门篇）

Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

Element快速入门

引入Element的css、js文件和Vue.js

<script src="vue.js">script>
<script src="element-ui/lib/index.js">script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
1
2
3

创建Vue核心对象

<script>
	new Vue({
        el:"#app"
	})
script>
1
2
3
4
5

官网复制Element组件代码:组件 | Element

Element布局

Element中有两种布局方式：

Layout布局：通过基础的24分栏，迅速简便地创建布局（默认）

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">div>el-col>
el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light">div>el-col>
el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">div>el-col>
  <el-col :span="8"><div class="grid-content bg-purple">div>el-col>
el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
  <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
  <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
  <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
el-row>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
style>
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

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

<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message">i>导航一template>
        <el-menu-item-group>
          <template slot="title">分组一template>
          <el-menu-item index="1-1">选项1el-menu-item>
          <el-menu-item index="1-2">选项2el-menu-item>
        el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3el-menu-item>
        el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4template>
          <el-menu-item index="1-4-1">选项4-1el-menu-item>
        el-submenu>
      el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu">i>导航二template>
        <el-menu-item-group>
          <template slot="title">分组一template>
          <el-menu-item index="2-1">选项1el-menu-item>
          <el-menu-item index="2-2">选项2el-menu-item>
        el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3el-menu-item>
        el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4template>
          <el-menu-item index="2-4-1">选项4-1el-menu-item>
        el-submenu>
      el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting">i>导航三template>
        <el-menu-item-group>
          <template slot="title">分组一template>
          <el-menu-item index="3-1">选项1el-menu-item>
          <el-menu-item index="3-2">选项2el-menu-item>
        el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3el-menu-item>
        el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4template>
          <el-menu-item index="3-4-1">选项4-1el-menu-item>
        el-submenu>
      el-submenu>
    el-menu>
  el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px">i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看el-dropdown-item>
          <el-dropdown-item>新增el-dropdown-item>
          <el-dropdown-item>删除el-dropdown-item>
        el-dropdown-menu>
      el-dropdown>
      <span>王小虎span>
    el-header>
    
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        el-table-column>
        <el-table-column prop="address" label="地址">
        el-table-column>
      el-table>
    el-main>
  el-container>
el-container>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
script>
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

想要哪个粘贴哪个

如果觉得文章对您有帮助，请帮忙点赞或者收藏，如果在文章中发现什么错误或不准确的地方，欢迎与我交流。

相关阅读:
Spring Cache代理对象 redis篇
 RSA加密算法（后端）
从键盘输入4个整数，输出其中的最大数和次大数（或从大到小依次输出）
由一个多线程并发保存而引发的思考
 【Vue3-Flask-BS架构Web应用】实践笔记1-使用一个bat脚本自动化完整部署环境
 面试Tip--java创建对象的四种方式
 【踩坑系列】发送微信模板消息返回40165 invalid weapp pagepath
1.Spring Cloud Eureka 简介
 交易想简化分析并少失误，波浪原则anzo capital认为必不可少
 代码注释有感
原文地址：https://blog.csdn.net/qq_37431461/article/details/136441216