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>
链接文字
<div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> <el-link type="primary">主要链接</el-link> <el-link type="success">成功链接</el-link> <el-link type="warning">警告链接</el-link> <el-link type="danger">危险链接</el-link> <el-link type="info">信息链接</el-link> </div>
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>
<script> import global from '@/js/global.js'; const cityOptions = ['上海', '北京', '广州', '深圳']; export default { components:{ }, data(){ return { text:"com1", checkAll: false,//是否全选 true/false checkedCities: ['上海', '北京'],//目前所选的项的数组 cities: cityOptions,//供选列表（总列表） isIndeterminate: true,//true表示选有 但是没选完 false表示（全选或一个都没选） } }, mounted(){ }, methods:{ handleCheckAllChange(val) { console.log(val);//是否全选true/false this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; console.log(this.checkedCities); console.log(this.checkAll); console.log(this.isIndeterminate); }, handleCheckedCitiesChange(value) { console.log(value);//被选中项的数组 let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; console.log(this.isIndeterminate);//是否全选或完全没选 console.log(this.checkAll) } } } </script>
注释： 在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(); }
