element UI使用
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:
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使用的更多相关文章
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——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/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 上传图片组件封装 element ui
// element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...
随机推荐
- 使用JavaScript获取前一周的日期
在开发当中遇到了一个关于echarts初始展示当前前7天的数据,正好记录一下如何获取前"n"天的日期, 返回时间格式:2020-02-02 // 返回前number天的日期格式为2 ...
- yum命令不能使用的解决办法
以前yum命令一直是可用的,今天使用它安装命令时一直提示,如下图: 百度了一圈说是网络问题: 然后我就ping www.baidu.com 可以ping通啊 最后在同事的帮助下找到了解决办法: vi ...
- IDEA无法启动:Failed to create JVM:error code -1
转自:https://blog.csdn.net/u013243986/article/details/52296944 随便设置把内存加大了, 结果idea就奔溃了,再打开时就提示这样的错误,Fai ...
- VisualStudioCode通过SSH远程编辑文件
翻译修改自:https://codepen.io/ginfuru/post/remote-editing-files-with-ssh 在远程服务器上编写文件是一件很糟糕的事情,vim和其他终端编辑器 ...
- 任务框架--Quartz 配置文件
配置文件 Quartz 有一个叫做quartz.properties的配置文件,它允许你修改框架运行时环境.缺省是使用 Quartz.jar 里面的quartz.properties 文件.你应该创建 ...
- CPU网卡亲和绑定
#!/bin/bash # # Copyright (c) , Intel Corporation # # Redistribution and use in source and binary fo ...
- android编译架构之添加C项目
1. 增加一个项目与android编译中枢息息相关.特别需要告诉编译中枢的一些特别信息. 例如: A 这个项目target名字是什么 B 这个项目编译类型是什么,bin?c?lib?or jar? ...
- 从租人APP沦为性工作发布平台 看共享经济监管边界
看共享经济监管边界" title="从租人APP沦为性工作发布平台 看共享经济监管边界"> 继直播类软件部分涉黄之后,最近火爆的各类"租人"软件 ...
- 在GitHub上分享自己的项目
GitHub主要是用作基于Git的分布式版本管理系统的库,可以保存和管理自己的代码,而且主要用作代码的合作开发. 注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的 ...
- C++走向远洋——45(警察和厨师、UML)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...