element-ui练习使用总结
<el-row>
<el-col class="borderRed" :span="24">
<div class="grid-content bg-purple height"> </div>
</el-col>
</el-row>
<el-row>
<el-col class="borderRed" :span="12">
<div class="grid-content bg-purple"> </div>
</el-col>
<el-col class="borderRed" :span="12">
<div class="grid-content bg-purple"> </div>
</el-col>
</el-row>
<!-- 间隔分栏 gutter指定栏之间的间隔-->
<el-row :gutter="20">
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
</el-row>
<!-- 偏移 offset指向右的偏移量-->
<el-row :gutter="20">
<el-col class="borderRed" :span="12" :offset="6"><div class="grid-content bg-purple"> </div></el-col>
</el-row>
<!-- flex对齐方式 -->
<el-row type="flex" justify="end">
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col>
</el-row>
<!-- 响应式布局 xs sm md lg xl-->
<el-row :gutter="10">
<el-col class="borderRed" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"> </div></el-col>
<el-col class="borderRed" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"> </div></el-col>
</el-row>
<!-- 响应式 用栅格实现列偏移的妙用 -->
<el-row :gutter="0">
<el-col :xs="0" :md="6"><div class="grid-content"> </div></el-col>
<el-col class="borderRed" :xs="24" :md="12"><div class="grid-content bg-purple"> </div></el-col>
</el-row>container布局（flex布局，注意兼容性！！！）
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>style
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
icon图
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>按钮
使用type、plain、round和circle
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>链接文字
radio单选框 和按钮框
要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" disabled label="2">备选项</el-radio>
<el-radio v-model="radio" label="3" border size="medium">备选项</el-radio>
<el-radio v-model="radio" label="4" border size="small">备选项</el-radio>
</template>
<input type="text" v-model="radio" >
<el-radio-group v-model="radio1" @change="aa(radio1)">
<el-radio-button label="上海" ></el-radio-button>
<el-radio-button label="北京" ></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<input type="text" v-model="radio1">多选按钮
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>注释： 在group上绑定:min="num" 或 :max="num" 可以限制最大选择数量和最小选择数量
输入框的使用
写一个响应式（宽度）的输入框（必须要双向绑定值，否则不能用）
<el-row>
<el-col :xs="0" :md="6"> </el-col>
<el-col :xs="24" :md="12">
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-col>
</el-row>下面是一个 前后加icon图 可以清空内容 可以查看密码的 输入框 （比较全面的功能）
<el-row>
<el-col :xs="0" :md="6"> </el-col>
<el-col :xs="24" :md="12">
<el-input
v-model="input"
suffix-icon="el-icon-date"
prefix-icon="el-icon-search"
clearable
show-password
placeholder="请输入内容"></el-input>
</el-col>
</el-row>文本域
<el-row>
<el-col :span="12" :offset="6">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<!-- 自适应高度 只加autosize属性就行 设置最小行和最大行时需要绑定值 -->
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="textarea2">
</el-input>
</el-col>
</el-row>复合型输入框
<div>
<el-input placeholder="请输入内容" v-model="input1">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input2">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
也可以做带提示的输入框，可以参考文档
选择框的使用
<el-select v-model="value" placeholder="请选择" @change="aa">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>data
options: \[{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}
\],
value: ''methods
aa(a){
console.log(a)
} 可设置 多选！！！而且所选的值 显示在框内！！
联级选择器
<div class="block">
<span class="demonstration">默认 click 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>data
value: \[\],
options: \[{
value: 'zhinan',
label: '指南',
children:\[
{
value:"二级值",
label:"二级label",
children:\[
{
value:"三级值",
label:"三级label"
}
\]
}
\]
}\]methods
handleChange(value) {
console.log(value);
} 可以通过设置 仅显示最后一项的值 请查文档
也可以单选 或多选 任意一级选项 查文档
swicth开关！！
<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip>
<el-switch
v-model="value1"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<el-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>data
value: '100',
value1: true,
value2: true有change事件
upload上传（兼容性不咋滴）
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload\_\_tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>data
fileList: \[
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
\]methods
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(\`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件\`);
},
beforeRemove(file, fileList) {
return this.$confirm(\`确定移除 ${ file.name }？\`);
} 表格
<el-table
:data="tableData"
style="width: 100%"
stripe
border
height="250">
<el-table-column
prop="date"
label="日期"
width="100"
fixed>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="100">
</el-table-column>
<el-table-column
prop="address"
label="地址"
fixed="right">
</el-table-column>
</el-table>data
tableData: \[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
\]表格还有其它非常强大的功能 但是只支持pc端。。 PC端的话可以去查文档 尽情使用（折叠，树形）
tag标签
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
<!-- 动态编辑标签 -->
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">{{tag}}</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
></el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>data
dynamicTags: \['标签一', '标签二', '标签三'\],
inputVisible: false,
inputValue: ''methods
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(\_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}感觉很不错
进度条
树形控件
。
。
。
导航
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="\_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="\_blank">订单管理</a></el-menu-item>
</el-menu>data
activeIndex: '1',
activeIndex2: '1'methods
handleSelect(key, keyPath) {
console.log(key, keyPath);
}tabs标签页
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>data
activeName: 'second'
methods
handleClick(tab, event) {
console.log(tab, event);
}form表单
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称haaa的冯绍峰" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>data
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: \[\],
resource: '',
desc: ''
},
rules: {
name: \[
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
\],
region: \[
{ required: true, message: '请选择活动区域', trigger: 'change' }
\],
date1: \[
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
\],
date2: \[
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
\],
type: \[
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
\],
resource: \[
{ required: true, message: '请选择活动资源', trigger: 'change' }
\],
desc: \[
{ required: true, message: '请填写活动形式', trigger: 'blur' }
\]
}methods
submitForm(formName) {
this.$refs\[formName\].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs\[formName\].resetFields();
}手机扫一扫
移动阅读更方便
你可能感兴趣的文章