• Element---基于VUE的桌面端组件库

     ✨✨个人主页:沫洺的主页

    📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                               📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                               📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

    💖💖如果文章对你有所帮助请留下三连✨✨

    🌈Element

    🎉🎉Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页

    🎉🎉组件：组成网页的部件，例如 超链接、按钮、图片、表格等等~

    🎉🎉Element 官网：https://element.eleme.cn/#/zh-CNListener

    🎨Element 快速入门

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

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

    2. 📌创建Vue核心对象

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

    3. 📌官网复制Element组件代码

    🎨Element 布局 

    Element 中有两种布局方式：

    1.📌Layout 布局：通过基础的 24 分栏，迅速简便地创建布局

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

    🔎Layout 布局

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="js/vue.js">script>
    8.     <script src="element-ui/lib/index.js">script>
    9.     <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    10.     
    11.     <style>
    12.         .el-row {
    13.             margin-bottom: 20px;
    14.         }
    15.         .el-col {
    16.             border-radius: 4px;
    17.         }
    18.         .bg-purple-dark {
    19.             background: #99a9bf;
    20.         }
    21.         .bg-purple {
    22.             background: #d3dce6;
    23.         }
    24.         .bg-purple-light {
    25.             background: #e5e9f2;
    26.         }
    27.         .grid-content {
    28.             border-radius: 4px;
    29.             min-height: 36px;
    30.         }
    31.         .row-bg {
    32.             padding: 10px 0;
    33.             background-color: #f9fafc;
    34.         }
    35.     style>
    36. head>
    37. <body>
    39. <div id="app">
    40.     <el-row>
    41.         <el-col :span="24"><div class="grid-content bg-purple-dark">div>el-col>
    42.     el-row>
    43.     <el-row>
    44.         <el-col :span="12"><div class="grid-content bg-purple">div>el-col>
    45.         <el-col :span="12"><div class="grid-content bg-purple-light">div>el-col>
    46.     el-row>
    47.     <el-row>
    48.         <el-col :span="8"><div class="grid-content bg-purple">div>el-col>
    49.         <el-col :span="8"><div class="grid-content bg-purple-light">div>el-col>
    50.         <el-col :span="8"><div class="grid-content bg-purple">div>el-col>
    51.     el-row>
    52.     <el-row>
    53.         <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    54.         <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    55.         <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    56.         <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    57.     el-row>
    58.     <el-row>
    59.         <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
    60.         <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
    61.         <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
    62.         <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
    63.         <el-col :span="4"><div class="grid-content bg-purple">div>el-col>
    64.         <el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
    65.     el-row>
    66.  
    67.  
    68. div>
    69.  
    71. <script>
    72.     new Vue({
    73.         el:"#app",
    74.         data:{},
    75.         methods:{},
    76.         mounted:{
    77.  
    78.         }
    79.     });
    80. script>
    81.  
    82. body>
    83. html>

    🔎Container 布局容器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="js/vue.js">script>
    8.     <script src="element-ui/lib/index.js">script>
    9.     <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    10.     
    11.     <style>
    12.         .el-header {
    13.             background-color: #B3C0D1;
    14.             color: #333;
    15.             line-height: 60px;
    16.         }
    17.  
    18.         .el-aside {
    19.             color: #333;
    20.         }
    21.     style>
    22.  
    23. head>
    24. <body>
    26. <div id="app">
    27.     <el-container style="height: 500px; border: 1px solid #eee">
    28.         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    29.             <el-menu :default-openeds="['1', '3']">
    30.                 <el-submenu index="1">
    31.                     <template slot="title"><i class="el-icon-message">i>导航一template>
    32.                     <el-menu-item-group>
    33.                         <template slot="title">分组一template>
    34.                         <el-menu-item index="1-1">选项1el-menu-item>
    35.                         <el-menu-item index="1-2">选项2el-menu-item>
    36.                     el-menu-item-group>
    37.                     <el-menu-item-group title="分组2">
    38.                         <el-menu-item index="1-3">选项3el-menu-item>
    39.                     el-menu-item-group>
    40.                     <el-submenu index="1-4">
    41.                         <template slot="title">选项4template>
    42.                         <el-menu-item index="1-4-1">选项4-1el-menu-item>
    43.                     el-submenu>
    44.                 el-submenu>
    45.                 <el-submenu index="2">
    46.                     <template slot="title"><i class="el-icon-menu">i>导航二template>
    47.                     <el-menu-item-group>
    48.                         <template slot="title">分组一template>
    49.                         <el-menu-item index="2-1">选项1el-menu-item>
    50.                         <el-menu-item index="2-2">选项2el-menu-item>
    51.                     el-menu-item-group>
    52.                     <el-menu-item-group title="分组2">
    53.                         <el-menu-item index="2-3">选项3el-menu-item>
    54.                     el-menu-item-group>
    55.                     <el-submenu index="2-4">
    56.                         <template slot="title">选项4template>
    57.                         <el-menu-item index="2-4-1">选项4-1el-menu-item>
    58.                     el-submenu>
    59.                 el-submenu>
    60.                 <el-submenu index="3">
    61.                     <template slot="title"><i class="el-icon-setting">i>导航三template>
    62.                     <el-menu-item-group>
    63.                         <template slot="title">分组一template>
    64.                         <el-menu-item index="3-1">选项1el-menu-item>
    65.                         <el-menu-item index="3-2">选项2el-menu-item>
    66.                     el-menu-item-group>
    67.                     <el-menu-item-group title="分组2">
    68.                         <el-menu-item index="3-3">选项3el-menu-item>
    69.                     el-menu-item-group>
    70.                     <el-submenu index="3-4">
    71.                         <template slot="title">选项4template>
    72.                         <el-menu-item index="3-4-1">选项4-1el-menu-item>
    73.                     el-submenu>
    74.                 el-submenu>
    75.             el-menu>
    76.         el-aside>
    77.  
    78.         <el-container>
    79.             <el-header style="text-align: right; font-size: 12px">
    80.                 <el-dropdown>
    81.                     <i class="el-icon-setting" style="margin-right: 15px">i>
    82.                     <el-dropdown-menu slot="dropdown">
    83.                         <el-dropdown-item>查看el-dropdown-item>
    84.                         <el-dropdown-item>新增el-dropdown-item>
    85.                         <el-dropdown-item>删除el-dropdown-item>
    86.                     el-dropdown-menu>
    87.                 el-dropdown>
    88.                 <span>王小虎span>
    89.             el-header>
    90.  
    91.             <el-main>
    92.                 <el-table :data="tableData">
    93.                     <el-table-column prop="date" label="日期" width="140">
    94.                     el-table-column>
    95.                     <el-table-column prop="name" label="姓名" width="120">
    96.                     el-table-column>
    97.                     <el-table-column prop="address" label="地址">
    98.                     el-table-column>
    99.                 el-table>
    100.             el-main>
    101.         el-container>
    102.     el-container>
    103.  
    104. div>
    105.  
    107. <script>
    108.     new Vue({
    109.         el:"#app",
    110.         data() {
    111.             const item = {
    112.                 date: '2016-05-02',
    113.                 name: '王小虎',
    114.                 address: '上海市普陀区金沙江路 1518 弄'
    115.             };
    116.             return {
    117.                 tableData: Array(20).fill(item)
    118.             }
    119.         },
    120.         methods:{},
    121.         mounted:{
    122.  
    123.         }
    124.     });
    125. script>
    126.  
    127. body>
    128. html>

    🎨Element 组件

    🎈接下来使用element组件制作一个好看的表单

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="../js/vue.js">script>
    8.     <script src="../element-ui/lib/index.js">script>
    9.     <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    10.     
    11.     <style>
    12.         .el-table .warning-row {
    13.             background: oldlace;
    14.         }
    15.  
    16.         .el-table .success-row {
    17.             background: #f0f9eb;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22. <div id="app">
    23.     
    24.     <el-form :inline="true" :model="brand" class="demo-form-inline">
    25.         <el-form-item label="当前状态">
    26.             <el-select v-model="brand.status" placeholder="当前状态">
    27.                 <el-option label="启用" value="1">el-option>
    28.                 <el-option label="禁用" value="0">el-option>
    29.             el-select>
    30.         el-form-item>
    31.         <el-form-item label="企业名称">
    32.             <el-input v-model="brand.companyName" placeholder="企业名称">el-input>
    33.         el-form-item>
    34.         <el-form-item label="品牌名称">
    35.             <el-input v-model="brand.brandName" placeholder="品牌名称">el-input>
    36.         el-form-item>
    37.         <el-form-item>
    38.             <el-button type="primary" @click="onSubmit">查询el-button>
    39.         el-form-item>
    40.     el-form>
    41.     
    42.     <el-row>
    43.         <el-button type="danger" plain>批量删除el-button>
    44.         <el-button type="primary" plain  @click="dialogVisible = true">新增el-button>
    45.     el-row>
    46.     
    47.     <el-dialog
    48.             title="编辑品牌"
    49.             :visible.sync="dialogVisible"
    50.             width="30%">
    51.  
    52.         <el-form ref="form" :model="brand" label-width="80px">
    53.             <el-form-item label="品牌名称">
    54.                 <el-input v-model="brand.brandName">el-input>
    55.             el-form-item>
    56.             <el-form-item label="企业名称">
    57.                 <el-input v-model="brand.companyName">el-input>
    58.             el-form-item>
    59.             <el-form-item label="排序">
    60.                 <el-input v-model="brand.ordered">el-input>
    61.             el-form-item>
    62.             <el-form-item label="备注">
    63.                 <el-input type="textarea" v-model="brand.description">el-input>
    64.             el-form-item>
    65.             <el-form-item label="状态">
    66.                 <el-switch v-model="brand.status"
    67.                            active-value="1"
    68.                            inactive-value="0"
    69.                 >el-switch>
    70.             el-form-item>
    71.  
    72.             <el-form-item>
    73.                 <el-button type="primary" @click="addBrand">提交el-button>
    74.                 <el-button @click="dialogVisible = false">取消el-button>
    75.             el-form-item>
    76.         el-form>
    77.     el-dialog>
    78.     
    79.     <template>
    80.         <el-table
    81.                 :data="tableData"
    82.                 style="width: 100%"
    83.                 :row-class-name="tableRowClassName"
    84.                 @selection-change="handleSelectionChange">
    85.             
    86.             <el-table-column
    87.                     type="selection"
    88.                     width="55">
    89.             el-table-column>
    90.             
    91.             <el-table-column
    92.                     type="index"
    93.                     width="50">
    94.             el-table-column>
    95.             <el-table-column
    96.                     prop="brandName"
    97.                     label="品牌名称"
    98.                     align="center">
    99.             el-table-column>
    100.             <el-table-column
    101.                     prop="companyName"
    102.                     label="企业名称"
    103.                     align="center">
    104.             el-table-column>
    105.             <el-table-column
    106.                     prop="ordered"
    107.                     align="center"
    108.                     label="排序">
    109.             el-table-column>
    110.             <el-table-column
    111.                     prop="status"
    112.                     align="center"
    113.                     label="当前状态">
    114.             el-table-column>
    115.             <el-table-column
    116.                     align="center"
    117.                     label="操作">
    118.                 
    119.                 <el-button type="primary">修改el-button>
    120.                 <el-button type="danger">删除el-button>
    121.             el-table-column>
    122.         el-table>
    123.     template>
    124.     
    125.     <el-pagination
    126.             @size-change="handleSizeChange"
    127.             @current-change="handleCurrentChange"
    128.             :current-page="currentPage"
    129.             :page-sizes="[5, 10, 15, 20]"
    130.             :page-size="5"
    131.             layout="total, sizes, prev, pager, next, jumper"
    132.             :total="400">
    133.     el-pagination>
    134. div>
    135.  
    137. <script>
    138.     new Vue({
    139.         el:"#app",
    140.         data() {
    141.             return {
    142.                 //当前页码
    143.                 currentPage: 4,
    144.                 //添加数据对话框是否展示的标记
    145.                 dialogVisible: false,
    146.                 //品牌模型数据数据
    147.                 brand: {
    148.                     status: '',
    149.                     brandName: '',
    150.                     companyName: '',
    151.                     id:'',
    152.                     ordered:'',
    153.                     description:''
    154.                 },
    155.                 //复习框选中集合
    156.                 multipleSelection: [],
    157.                 //表格数据
    158.                 tableData: [{
    159.                     brandName: '华为',
    160.                     companyName: '华为科技有限公司',
    161.                     ordered: '100',
    162.                     status:'1'
    163.                 }, {
    164.                     brandName: '华为',
    165.                     companyName: '华为科技有限公司',
    166.                     ordered: '100',
    167.                     status:'1'
    168.                 }, {
    169.                     brandName: '华为',
    170.                     companyName: '华为科技有限公司',
    171.                     ordered: '100',
    172.                     status:'1'
    173.                 }, {
    174.                     brandName: '华为',
    175.                     companyName: '华为科技有限公司',
    176.                     ordered: '100',
    177.                     status:'1'
    178.                 }]
    179.             }
    180.         },
    181.         methods: {
    182.             //分页
    183.             handleSizeChange(val) {
    184.                 console.log(`每页 ${val} 条`);
    185.             },
    186.             handleCurrentChange(val) {
    187.                 console.log(`当前页: ${val}`);
    188.             },
    189.             //表格
    190.             tableRowClassName({row, rowIndex}) {
    191.                 if (rowIndex === 1) {
    192.                     return 'warning-row';
    193.                 } else if (rowIndex === 3) {
    194.                     return 'success-row';
    195.                 }
    196.                 return '';
    197.             },
    198.             //复选框选中后执行的方法
    199.             handleSelectionChange(val) {
    200.                 this.multipleSelection = val;
    201.             },
    202.             //查询方法
    203.             onSubmit() {
    204.                 console.log(this.brand);
    205.             },
    206.             //添加方法
    207.             addBrand() {
    208.                 console.log(this.brand);
    209.             }
    210.         },
    211.         mounted:{
    212.  
    213.         }
    214.     });
    215. script>
    216. body>
    217. html>

    💦 说明

    🎁将element-ui包放到webapp下

    🎯网盘链接：https://pan.baidu.com/s/1NgM50O0X71Qm6LncPyReiw?pwd=wznb 
    提取码：wznb 

  • 相关阅读:
    MySQL数据库之用户管理
    bizlog通用操作日志组件（代码分析篇）
    【zabbix监控三】zabbix之部署代理服务器
    【无标题】
    Java实现桥接模式（设计模式 五）
    FreeSWITCH 1.10.10 简单图形化界面7-记录一次配置讯时网关的问题
    RK3568开发笔记（十）：开发板buildroot固件移植开发的应用Demo，启动全屏显示
    基于Java毕业设计知识库系统源码+系统+mysql+lw文档+部署软件
    排列数字（DFS深度优先搜索）
    高考学计算机专业的小白指南，一些比较实用的软件，快速入手计算机
  • 原文地址：https://blog.csdn.net/HeyVIrBbox/article/details/126818847