<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(); }