ElementUI

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量538 收藏
点赞数 1
分类专栏： JavaWeb 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57907966/article/details/125924797
版权

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

官网：Element - 网站快速成型工具

Element快速入门

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

导入饿了，element-ui文件

链接：https://pan.baidu.com/s/1H_zTskWEHuwZDWd9S0l7zA
提取码：0630

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

2.创建Vue核心对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    
</div>



<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>

</html>

3.官网复制Element代码即可

直接粘贴复制到div中

image-20220713174542191

Element布局

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

Container:带有导航栏的布局

image-20220713175721252

设置界面：

image-20220714145534441

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<body>

<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>

<!--添加对话框-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            >
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0" ></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>



    </el-dialog>

<!--表格-->
    <template>


        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"

            @selection-change="handleSelectionChange">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="brandName"
                    label="品牌名称"
                   >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="companyName"
                    label="企业名称"
                    >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="ordered"
                    label="排序">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="status"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">

                <el-row>

                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>


</div>



<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //查询方法
     onSubmit() {
        console.log(this.brand);
    },
            //添加数据
            addBrand() {
                console.log(this.brand);
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }


        },
        data() {
            return {
                //当前页码
                currentPage: 4,
                //新增的表单数据

                //对话框是否关闭
                dialogVisible:false,
                //复选框选中数据集合
                multipleSelection: [],

                //表格的数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status:"1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status:"1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status:"1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status:"1"
                }],

                //品牌模型数据
                brand: {
                   status:'',
                    brandName:'',
                    companyName:'',
                    id:'',
                    order:'',
                    description:''
                }
            }
        }

    })
</script>
</body>

</html>
白小筠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI简介
weixin_64887902的博客
05-11 7896
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN 注1：类似前端框架还有iview Vue+ElementUI安装 CDN方式 <!-- 1. 导入css --> &...
仿element-ui搭建官网页面
qq_39285178的博客
07-29 1639
仿element-ui官网
快速上手 Vue 和 Element-UI 组件库
热门推荐
程序猿追的博客
12-19 4万+
vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
Element-UI详解
最新发布
科技追踪者的专栏
05-22 1834
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
Element-UI
qq_50048558的博客
10-26 9282
一、Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点：点击此处 https://element.eleme.cn/#/zh-CN 二、Element-UI使用 1.命令行方式安装 创建 一个新的项目 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 打开 main.js , 导入Element-UI 相关资源. main.js是工程的入口文件
ElementUI概述 [ElementUI]
m0_57001006的博客
07-18 6994
在我们复制ElementUI组件库中的组件源码的时候我们会发现有一个&last-child,这个是一个伪类选择器。表格中的一列就是//设置Vue核心对象的挂载位置,这里就是表示挂载到我们的id属性为app的标签上。container布局容器用于布局的组件容器,方便快捷的搭建页面的基本内容。Layout布局通过组件的基础的24分栏,迅速简便的创建布局。引入Element的CSS和JS文件。...
Element-UI简介
weixin_64704029的博客
08-07 9448
element-ui是一个前端的ui框架，封装了很多已经写好的ui组件，例如表单组件，布局组件，表格组件.......是一套桌面端组件。Element - 网站快速成型工具。
axure-elementui.zip
12-31
ElementUI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，用于快速构建美观且响应式的 Web 应用。在“axure-elementui.zip”这个压缩包中，很可能是包含了一些使用 Axure 设计工具制作的原型，这些...
ElementUI离线文档（1.4-2.4）
11-01
ElementUI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，适用于构建现代 Web 应用程序。这个离线文档包含了从版本 1.4 到 2.4 的所有 API 和相关文档，对于开发者来说是极其实用的资源。 1. **...
ElementUI离线文档（2.15.7）
11-01
ElementUI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义且响应式的用户界面。2.15.7 版本是 ElementUI 的一个稳定版本，包含了从早期版本迭代积累的优化和改进。 在 ...
Axure-web元件库 ElementUI元件库.zip
04-02
将ElementUI元件库整合进Axure，可以帮助设计师更方便地构建与ElementUI风格一致的原型，提高设计效率。 在" Axure-web元件库 ElementUI元件库.zip "这个压缩包中，我们可以期待找到一系列预设好的、模仿ElementUI...
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
在本文中，我们将深入探讨如何使用ElementUI框架来构建一个具备首页导航和左侧菜单功能的Web应用程序。ElementUI是一款基于Vue.js的开源组件库，它提供了丰富的UI组件，能够帮助开发者快速搭建美观、响应式的界面。 ...
【Vue】Element-UI入门学习引导
wusandaofwy的博客
09-26 4006
Element-UI学习 了解vue开发中一些常用的布局组件库 项目导入element-ui el-button按钮 表单组件el-table 表单组件el-table基本使用 el-table组件插槽实现自定义列 el-table组件作用域插槽使用 分页组件el-pagination 表单组件el-form el-form组件基本使用 el-form组件表单校验 1.在data()中定义校验规则
Vue基础（九）——ElementUI
pro1822的博客
09-01 3305
Vue基础（九）——ElementUI
elementui的介绍和使用 以及使用elementui完成增删改查和登录
Ysuhang的博客
05-31 2万+
elementui的介绍和使用 以及使用elementui完成增删改查和登录
elementui 复制功能，无需下载插件纯原生实现
li22356的博客
05-17 2492
点击复制按钮实现内容复制 第一种方法：（繁琐） <div slot="footer" class="dialog-footer"> <el-button @click="show=false" size="mini">关 闭</el-button> <el-button @click="handleSubmit()" size="mini" type="primary">复制</el-button> </d
UI素材|最全面的移动端 UI KIT 模板
awayaya1的博客
10-07 962
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变
vue使用ElementUI搭建主页
世间本无路，恒走坦途出
10-21 1559
找到Container 布局容器，找到 实例 代码，拷贝该代码至Home.vue的template里面的div中，div、el-container、el-aside、el-munu元素height设置100%(为了让元素贴边)，el-container删除border。2、然后到App.vue，删除id="app"中除了以外的元素，和style里面的样式内容，在style里面加入（也是为了元素贴边）在main.js中引入该css。
elementui实现
05-16
ElementUI是一套基于Vue.js 2.0的组件库，它提供了一系列的常用组件，例如按钮、表格、表单等，帮助开发者快速构建Web应用程序的用户界面。ElementUI的实现主要包括以下几个方面： 1. 组件的封装：ElementUI将常见...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值