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. 使用JavaScript获取前一周的日期

    在开发当中遇到了一个关于echarts初始展示当前前7天的数据,正好记录一下如何获取前"n"天的日期, 返回时间格式:2020-02-02 // 返回前number天的日期格式为2 ...

  2. yum命令不能使用的解决办法

    以前yum命令一直是可用的,今天使用它安装命令时一直提示,如下图: 百度了一圈说是网络问题: 然后我就ping www.baidu.com  可以ping通啊 最后在同事的帮助下找到了解决办法: vi ...

  3. IDEA无法启动:Failed to create JVM:error code -1

    转自:https://blog.csdn.net/u013243986/article/details/52296944 随便设置把内存加大了, 结果idea就奔溃了,再打开时就提示这样的错误,Fai ...

  4. VisualStudioCode通过SSH远程编辑文件

    翻译修改自:https://codepen.io/ginfuru/post/remote-editing-files-with-ssh 在远程服务器上编写文件是一件很糟糕的事情,vim和其他终端编辑器 ...

  5. 任务框架--Quartz 配置文件

    配置文件 Quartz 有一个叫做quartz.properties的配置文件,它允许你修改框架运行时环境.缺省是使用 Quartz.jar 里面的quartz.properties 文件.你应该创建 ...

  6. CPU网卡亲和绑定

    #!/bin/bash # # Copyright (c) , Intel Corporation # # Redistribution and use in source and binary fo ...

  7. android编译架构之添加C项目

    1.  增加一个项目与android编译中枢息息相关.特别需要告诉编译中枢的一些特别信息. 例如: A 这个项目target名字是什么 B 这个项目编译类型是什么,bin?c?lib?or jar? ...

  8. 从租人APP沦为性工作发布平台 看共享经济监管边界

    看共享经济监管边界" title="从租人APP沦为性工作发布平台 看共享经济监管边界"> 继直播类软件部分涉黄之后,最近火爆的各类"租人"软件 ...

  9. 在GitHub上分享自己的项目

    GitHub主要是用作基于Git的分布式版本管理系统的库,可以保存和管理自己的代码,而且主要用作代码的合作开发. 注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的 ...

  10. C++走向远洋——45(警察和厨师、UML)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...