Element 入门教程

Element 入门
Element 布局
业务 - element 美化页面
- 表格
- 表单
- 对话框 + 表单
- 分页工具条
- 页面

Element 入门

官网：https://element.eleme.cn/#/zh-CN

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

<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">

创建 Vue 核心对象
```
<script>new Vue({el: "#app"})</script>
```
官网复制 Element 组件代码

Element 布局

Layout 布局：24 分栏
Container 布局容器：带导航栏

业务 - element 美化页面

表格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!-- 表格 --><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="当前状态"></el-table-column><el-table-columnalign="center"label="操作"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></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)}},data() {return {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',}, {brandName: '华为',companyName: '华为科技有限公司',ordered: '100',status: '1',}]}}})</script></body>
</html>

表单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><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><!-- 表格 --><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="当前状态"></el-table-column><el-table-columnalign="center"label="操作"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></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);}},data() {return {// 搜索表单数据brand: {status: '',brandName: '',companyName: ''},// 复选框选中数据集合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',}, {brandName: '华为',companyName: '华为科技有限公司',ordered: '100',status: '1',}]}}})</script></body>
</html>

对话框 + 表单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><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-dialogtitle="编辑品牌":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="100"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-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="当前状态"></el-table-column><el-table-columnalign="center"label="操作"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></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);}},data() {return {// 添加数据对话框是否展示的标记dialogVisible: false,// 品牌模型数据brand: {status: '',brandName: '',companyName: '',id: '',ordered: '',description: ''},// 复选框选中数据集合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',}, {brandName: '华为',companyName: '华为科技有限公司',ordered: '100',status: '1',}]}}})</script></body>
</html>

分页工具条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><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-dialogtitle="编辑品牌":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="100"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-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="当前状态"></el-table-column><el-table-columnalign="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="currentPage":page-sizes="[5, 10, 15, 20]":page-size="5"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,// 品牌模型数据brand: {status: '',brandName: '',companyName: '',id: '',ordered: '',description: ''},// 复选框选中数据集合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',}, {brandName: '华为',companyName: '华为科技有限公司',ordered: '100',status: '1',}]}}})</script></body>
</html>

页面

Element 入门教程相关推荐

Scala开发入门教程
出处:http://blog.csdn.net/mapdigit/article/details/21878083 Scala语言和其它语言比如Java相比,算是一个比较复杂的语言,它是一个面向对象和 ...
python入门教程官方-Python自学入门？
如果你是零基础入门 Python 的话,建议初学者至少达到两个目标: 会用,理解. 会用通过 Python 入门教程,学习 Python 的语法,熟悉 Python 标准库的使用. 目前 Pytho ...
Angular2入门教程-1
2019独角兽企业重金招聘Python工程师标准>>> Angular2入门教程-1 今天,Angular2终于正式发布了2.0.0的正式版,所以已经可以开始正式使用了. Angul ...
WPF入门教程（七）---依赖属性（3）（转）
WPF入门教程(七)---依赖属性(3) 2018年08月24日 08:33:43 weixin_38029882 阅读数:50 四. 只读依赖属性在以前在对于非WPF的功能来说,对于类的属性的封装 ...
以太坊智能合约编程之带菜鸟入门教程
手把手带你走上智能合约编程之路译注:原文首发于ConsenSys开发者博客,原作者为Eva以及ConsenSys的开发团队.如果您想要获取更多及时信息,可以访问ConsenSys首页点击左下角New ...
numpy 数组抽取_清晰易懂的Numpy入门教程
原标题:清晰易懂的Numpy入门教程翻译 | 石头来源 | Machine Learning Plus Numpy是python语言中最基础和最强大的科学计算和数据处理的工具包,如数据分析工具pa ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
java jsoup爬取动态网页_java通过Jsoup爬取网页(入门教程)
一,导入依赖 org.jsoup jsoup 1.10.3 org.apache.httpcomponents httpclient 二,编写demo类注意不要导错包了,是org.jsoup.nod ...
JavaScript新手入门教程大全~~~
JavaScript新手入门教程大全~~~ 一. js教程介绍:JavaScript是一种运行在浏览器中的解释型的编程语言. 那么问题来了,为什么我们要学JavaScript?因为你没有选择.在Web ...
TypeScript入门教程之枚举 Enums
TypeScript入门教程之枚举 Enums 枚举是一种组织相关值集合的方法.许多其他编程语言(C / C#/ Java)具有enum数据类型,而JavaScript没有.但是,TypeScri ...

Element 入门教程

Element 入门

Element 布局

业务 - element 美化页面

表格

表单

对话框 + 表单

分页工具条

页面

Element 入门教程相关推荐

最新文章

热门文章