1.Button按钮

<el-button type="text">文字按钮</el-button>设置type="text",可以是无边框的效果。

2.Link文本链接

<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>    可以有a标签的效果。

3.Form表单

<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form>

label-width:设置所有label的宽度;

当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent

表单验证:<el-form :rules="rules" status-icon :model="ruleForm">,当不符合验证规则时,label前会有红色*;status-icon为校验添加小图标,√ 或 ×;

<el-form-item label="活动名称" prop="name" ref="ruleForm"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>1 

 rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
} <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
submitForm(ruleForm) {
   this.$refs[formName].validate((valid) => { 
    if (valid) {
      alert('submit!');
    } else {
    console.log('error submit!!');
    return false;
    }
   });
},

4.Table表格

为指定的一行增加class;

  <el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
</el-table> <style>
.el-table .warning-row {
background: oldlace;
} .el-table .success-row {
background: #f0f9eb;
}
</style> methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},

需要有操作按钮的:

  <el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>

点击某一行,添加样式

  <el-table
:data="tableTreeDdata"
size="mini"
class="table-fixed"
style="width: 100%;"
type="selection"
v-loading="loading"
@row-click="rowClick"
:row-class-name="tableRowClassName1"
:row-style="selectedHighlight"
>
methods:    
tableRowClassName1 ({row, rowIndex}) {
//把每一行的索引放进row
row.index = rowIndex;
},
selectedHighlight({row, rowIndex}) {
if ((this.getIndex) === rowIndex ) {
return {
"background-color": "#efa3b2"
};
}
},
rowClick (row) {
this.getIndex=row.index
},

5.Pagination分页

 <span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>

其中:入参需要是data中的元数据;total是后台获取的;当前页也是元数据;

 <!-- 分页 -->
<div class="toolbar" style="padding:10px;margin-bottom: 30px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.page"
:page-size="listQuery.rows"
layout="total, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div> handleSizeChange(val) {
this.listQuery.rows = val;
this.findTreeData();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.findTreeData();
}

element UI使用的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  10. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

随机推荐

  1. VRRP笔记一:基本简介(注意iptables和selinux的问题)

    LAN客户端判定哪个路由器应该为其到达目标主机的下一跳网关的方式有动态及静态决策两种方式,其中,觉的动态路由发现方式有如下几种: 1.Proxy ARP —— 客户端使用ARP协议获取其想要到达的目标 ...

  2. linux下载文件到本地_把linux服务器的文件下到本地windows

    tar -cvf script.tar scriptsz script.tar 文件夹先要打包,并且要指定打包的名字. 具体:  sz/rz命令:  一般来说,linux服务器大多是通过ssh来进行远 ...

  3. 转:zabbix 2.0.6监控cisco交换机 2950 2960s 3560G

    转自: http://blog.chinaunix.net/uid-24250828-id-3806551.html 想在zabbix 上监控交换机端口的流量,找了两天的模板,包括官方的和网友写的.在 ...

  4. DBCP + C3P0 连接池

    DBCP 配置参数如下: 参数 默认值 可选值 格式 说明 username       用户名 password       密码 url       数据库连接url driverClassNam ...

  5. linux-深度学习环境配置-Centos

    下载Centos 7安装镜像,制作启动优盘. Install CentOS 7 安装CentOS 7. 第一步,配置日期.语言和键盘. 第二步,选择-系统-安装位置,进入磁盘分区界面.选择-其它存储选 ...

  6. 【转载】Java DecimalFormat 用法

    转载只供个人学习参考,以下查看请前往原出处:http://blog.csdn.net/wangchangshuai0010/article/details/8577982 我们经常要将数字进行格式化, ...

  7. Jun

    Contents 数据来源 代码演示 讨论 一.数据来源 为了节省时间,我直接用了官方所给的数据,分别是雄性和雌性小鼠的肝脏芯片数据 Female Data Male Data 二.代码演示 数据输入 ...

  8. 代工黑马,纬创如何强吞iPhone?

    ​ 现在,智能手机市场非常得意兴阑珊,以苹果为首的最强大脑似乎再也想不出什么好的创意,iPhone7也只不过是旧机种的翻新款式,看上去跟一块板砖.一块镜子差不多:软体方面则出现了大批的"过度 ...

  9. 一起了解 .Net Foundation 项目 No.8

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. IdentityModel ...

  10. Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表

    上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...