element/docs.67c0e45.js

webpackJsonp([0,2],[function(s,t,a){s.exports=a(1)},function(s,t,a){(function(s){"use strict";function t(s){return s&&s.__esModule?s:{default:s}}var l=a(2),n=t(l),e=a(3),i=t(e),v=a(21),_=t(v),r=a(22),c=t(r),p=a(576),o=t(p);a(962);var h=a(969),d=t(h),C=a(975),j=t(C),u=a(981),g=t(u),m=a(988),b=t(m),f=a(993),y=t(f),w=a(998),k=t(w);a(999).install(),n.default.use(o.default),n.default.use(_.default),n.default.component("demo-block",d.default),n.default.component("main-footer",j.default),n.default.component("main-header",g.default),n.default.component("side-nav",b.default),n.default.component("footer-nav",y.default);var x=new _.default({mode:"hash",base:s,routes:c.default});x.afterEach(function(s){var t=k.default[s.meta.lang];for(var a in t)if(new RegExp("^"+a,"g").test(s.name))return void(document.title=t[a]);document.title="Element"}),new n.default({render:function(s){return s(i.default)},router:x}).$mount("#app")}).call(t,"/")},,function(s,t,a){a(4);var l=a(13)(a(14),a(20),null,null);s.exports=l.exports},function(s,t){},,,,,,,,,,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},e=a(15),i=a(16),v=l(i),_=a(19),r=l(_);(0,e.use)(location.href.indexOf("zh-CN")>-1?v.default:r.default),t.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,e.use)("zh-CN"===this.lang?v.default:r.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var s=function(){var s=location.href.match(/#[^#]+$/g);if(!s)return{v:void 0};var t=document.querySelector(s[0]);return t?void setTimeout(function(s){document.documentElement.scrollTop=document.body.scrollTop=t.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof s?"undefined":n(s)))return s.v}}},mounted:function(){this.localize(),this.renderAnchorHref(),this.goAnchor()},created:function(){var s=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})}}},,,,,function(s,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All"},tree:{emptyText:"No Data"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{attrs:{id:"app"}},["play"!==s.lang?a("main-header"):s._e(),a("div",{staticClass:"main-cnt"},[a("router-view")],1),"play"!==s.lang?a("main-footer"):s._e()],1)},staticRenderFns:[]}},function(s,t){s.exports=VueRouter},function(s,t,a){
attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its 
attrs:{id:"1-0-0-rc-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.6")]),a("p",[a("em",[s._v("2016-10-11")])]),a("ul",[a("li",[s._v("修复 Tabs 切换后 Tab-panel 被销毁的问题")]),a("li",[s._v("修复 TimePicker 错误的隐藏面板")]),a("li",[s._v("修复 Table Cell 的样式, #204")]),a("li",[s._v("修复 Menu default-active 属性不能为空的问题, #200")]),a("li",[s._v("修复 Menu unique-opened 开启后无法展开子菜单的问题, #200")]),a("li",[s._v("为 Notification 和 Message 的不同 type 添加独立的调用方法")]),a("li",[s._v("为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定")]),a("li",[s._v("新增 Input textarea 类型的 rows, autosize 属性")]),a("li",[s._v("为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调")]),a("li",[s._v("新增 DatePicker 禁用日期功能 #253")]),a("li",[s._v("修复 多选可搜索的 Select 下拉选项自动展开的问题")]),a("li",[s._v("为 Dialog 添加 top 属性")]),a("li",[s._v("修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295")]),a("li",[s._v("Checkbox change 事件现在只能被人为的交互操作所触发")]),a("li",[s._v("新增 Checkbox checked 属性")]),a("li",[s._v("修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式")])]),a("h3",{attrs:{id:"1-0-0-rc-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.5")]),a("p",[a("em",[s._v("2016-09-30")])]),a("ul",[a("li",[s._v("修复 Table 头部不同步的问题")]),a("li",[s._v("修复 Menu 组件 default-active 绑定动态值无法更新的问题")]),a("li",[s._v("新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单")]),a("li",[s._v("修复 vue-popper 引入 popper 路径错误")]),a("li",[s._v("修复 DatePicker 初始值是合法时间类型但无法设置成功的问题")]),a("li",[s._v("修复 Pagination 的图标没有正确切换样式, #163")]),a("li",[s._v("修复 Row 组件 align 属性不生效的问题")]),a("li",[s._v("修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题")]),a("li",[s._v("新增 Menu 组件中 MenuItem 的 route 属性")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件的 "),a("code",[s._v("unique-opend")]),s._v(" 属性修正为 "),a("code",[s._v("unique-opened")])])]),a("h3",{attrs:{id:"1-0-0-rc-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.4")]),a("p",[a("em",[s._v("2016-09-21")])]),a("ul",[a("li",[s._v("修复 Select 多选时选项变为空数组后 placeholder 不出现的问题")]),a("li",[s._v("修复 Time Picker 时间选择可滚动")]),a("li",[s._v("修复 Tooltip 有时会错位的问题")]),a("li",[s._v("修复 丢失的组件 css 文件")]),a("li",[s._v("修复 Table 在 Safari 下边框没对齐")]),a("li",[s._v("修复 TimePicker 图标样式被默认图标样式覆盖")]),a("li",[s._v("修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题")]),a("li",[s._v("修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题")]),a("li",[s._v("修复 Table 初次渲染时宽度重新计算 #78")]),a("li",[s._v("新增 时间、日期选择器增加 align 属性，可设置对齐方式")]),a("li",[s._v("新增 TableColumn 的 a
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      comments\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{sta
staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._
staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("sp
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(84)},function(s,t,a){var l=a(13)(a(85),a(86),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"messag
},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a
staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" :show-all-levels="false"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions3,expression:"selectedOptions3"}],attrs:{options:s.options},domProps:{value:s.selectedOptions3},on:{input:function(t){s.selectedOptions3=t}}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{s
},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'casca
},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n       
staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="selected and disabled" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checkList: ['selected and disabled','Option A']\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkList,expression:"checkList"}],domProps:{value:s.checkList},on:{input:function(t){s.checkList=t}}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._
},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and 
"aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(103)},function(s,t,a){var l=a(13)(null,a(104),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("p",[s._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("p",[s._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hlj
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hlj
},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{
attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Each "),a("code",[s._v("el-dialog")]),s._v(" instance has the following methods that can be used to open/close the instance without explicitly changing the value of "),a("code",[s._v("v-model")]),s._v(":")])},f
},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v(
},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inlin
staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-na
staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{
}]}},function(s,t,a){s.exports=a(128)},function(s,t,a){var l=a(13)(a(129),a(131),null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(130);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},n=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?n(s,t):l(s,t)}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(133)},function(s,t,a){var l=a(13)(null,a(134),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]lo
return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(145)},function(s,t,a){a(146);var l=a(13)(a(148),a(149),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(2);l.component("my-item-en",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"value"}},[a.value]),s("span",{attrs:{class:"link"}},[a.link])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input"></el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input,expression:"input"}],attrs:{placeholder:"Please input"},domProps:{value:s.input},on:{input:function(t){s.input=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input plac
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state1,expression:"state1"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},domProps:{value:s.state1},on:{select:s.handleSelect,input:function(t){s.state1=t}}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state2,expression:"state2"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},domProps:{value:s.state2},on:{select:s.handleSelect,input:function(t){s.state2=t}}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a
id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("
staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{stati
},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span
},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading2" element-loading-text="Loading..." :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="Date" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading2: true\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("e
script:"\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{s
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open2">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._
},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s.
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr
},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Clic
},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of 
script:"\n  export default {\n    data () {\n      return {\n        radio3: 'New York',\n        radio4: 'New York',\n        radio5: 'New York'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio3,expression:"radio3"}],domProps:{value:s.radio3},on:{input:function(t){s.radio3=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio4,expression:"radio4"}],domProps:{value:s.radio4},on:{input:function(t){s.radio4=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio5,expression:"radio5"}],attrs:{disabled:!0},domProps:{value:s.radio5},on:{input:function(t){s.radio5=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("<el-radio>")]),s._v(" element into "),a("code",[s._v("<el-radio-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass
return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(199)},function(s,t,a){var l=a(13)(a(200),a(201),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="Select">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],attrs:{placeholder:"Select"},domProps:{value:s.value},on:{input:function(t){s.value=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-op
staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="Select">\n    <el-option-group v-for="group in options3" :label="group.label">\n      <el-option v-for="item in group.options" :label="item.label" :value="item.value">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n\n',script:"\n  export default 
},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("
script:"\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("me
address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],currentRow:null,multipleSelection:[]}},methods:{handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'  <template>\n    <el-table :data="tableData" style="width: 100%">\n      <el-table-column prop="date" label="Date" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="Name" width="180">\n      </el-table-column>\n      <el-table-column prop="address" label="Address">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  \n',script:"\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" a
},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" height="250" border style="width: 100%">\n    <el-table-column prop="date" label="Date" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},
},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  
border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{s
},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" style="width: 100%">\n    <el-table-column type="expand">\n      <template scope="props">\n        <p>State: {{ props.row.state }}</p>\n        <p>City: {{ props.row.city }}</p>\n        <p>Address: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column label="Date" prop="date">\n    </el-table-column>\n    <el-table-column label="Name" prop="name">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:{default:function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}}}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab
editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],domProps:{value:s.activeName},on:{"tab-click":s.handleClick,input:function(t){s.activeName=t}}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")])
},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:
},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n  <el-time-select placeholder=\"Start time\" v-model=\"startTime\" :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select placeholder=\"End time\" v-model=\"endTime\" :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){s.endTime=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag
},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",
},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")]),a("div",{staticCla
},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="avatar-uploader" action="//jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarScucess" :before-upl
staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._
staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    点我查看"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      评论\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      回复\n      "),a(
},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="edit"></el-button>\n<el-button type="primary" icon="share"></el-button>\n<el-button type="primary" icon="delete"></el-button>\n<el-button type="primary" icon="search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("搜索")]),a("el-button",{attrs:{type:"primary"}},[s._v("上传"),a("i",{staticClass:"el-icon-upload el-icon--right"})])],1),a("p",[s._v("设置"),a("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),a("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pr
staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card 卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa",
label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"},{value:"input-number",label:"InputNumber 计数器"},{value:"select",label:"Select 选择器"},{value:"cascader",label:"Cascader 级联选择器"},{value:"switch",label:"Switch 开关"},{value:"slider",label:"Slider 滑块"},{value:"time-picker",label:"TimePicker 时间选择器"},{value:"date-picker",label:"DatePicker 日期选择器"},{value:"datetime-picker",label:"DateTimePicker 日期时间选择器"},{value:"upload",label:"Upload 上传"},{value:"rate",label:"Rate 评分"},{value:"form",label:"Form 表单"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table 表格"},{value:"tag",label:"Tag 标签"},{value:"progress",label:"Progress 进度条"},{value:"tree",label:"Tree 树形控件"},{value:"pagination",label:"Pagination 分页"},{value:"badge",label:"Badge 标记"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert 警告"},{value:"loading",label:"Loading 加载"},{value:"message",label:"Message 消息提示"},{value:"message-box",label:"MessageBox 弹框"},{value:"notification",label:"Notification 通知"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu 导航菜单"},{value:"tabs",label:"Tabs 标签页"},{value:"breadcrumb",label:"Breadcrumb 面包屑"},{value:"dropdown",label:"Dropdown 下拉菜单"},{value:"steps",label:"Steps 步骤条"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog 对话框"},{value:"tooltip",label:"Tooltip 文字提示"},{value:"popover",label:"Popover 弹出框"},{value:"card",label:"Card 卡片"},{value:"carousel",label:"Carousel 走马灯"},{value:"collapse",label:"Collapse 折叠面板"}]}]},{value:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("江苏")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"南京"}]:s.indexOf("浙江")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"杭州"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),s._m(1),a("p",[s._v("有两种触发子菜单的方式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认 click 触发子菜单</span>\n  <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n  </el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">hover 触发子菜单</span>\n  <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions2" @change="handleChange">\n  </el-cascader>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设
staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("属性"),a("code",[s._v("show-all-levels")]),s._v("定义了是否显示完整的路径，将其赋值为"),a("code",[s._v("false")]),s._v("则仅显示最后一级")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n       
staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("va
},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-
staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticCla
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkAll: true,\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checkAll,expression:"checkAll"}],attrs:{indeterminate:s.isIndeterminate},domProps:{value:s.checkAll},on:{change:s.handleCheckAllChange,input:function(t){s.checkAll=t}}},[s._v("全选")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkedCities,expression:"checkedCities"}],domProps:{value:s.checkedCities},on:{change:s.handleCheckedCitiesChange,input:function(t){s.checkedCities=t}}},s._l(s.cities,function(t){return a("el-checkbox",{attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("全选"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse 折叠面板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义面板标题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("除了可以通过 "),a("code",[s._v("title")]),s._v(" 属性以外，还可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否手风琴模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),
staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions0")]),s._v(": {\n          disabledDate(time) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" time.getTime() < "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now() - "),a("span",{staticClass:"hljs-number"},[s._v("8.64e7")]),s._v(";\n          }\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]
},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n  
},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("打开嵌套表格的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("打开嵌套表单的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-m
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hlj
},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._
script:"\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        rules: {\n          name: [\n            { required: true, message: '请输入活动名称', trigger: 'blur' },\n            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: '请选择活动区域', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: '请选择活动资源', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: '请填写活动形式', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.name,expression:"ruleForm.name"}],domProps:{value:s.ruleForm.name},on:{input:function(t){s.ruleForm.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.region,expression:"ruleForm.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.ruleForm.region},on:{input:function(t){s.ruleForm.region=t}}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date1,expression:"ruleForm.date1"}],staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},domProps:{value:s.ruleForm.date1},on:{input:function(t){s.ruleForm.date1=t}}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date2,expression:"ruleForm.date2"}],staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},domProps:{value:s.ruleForm.date2},on:{input:function(t){s.ruleForm.date2=t}}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.delivery,expression:"ruleForm.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.ruleForm.delivery},on:{input:function(t){s.ruleForm.delivery=t}}})],1),a("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.type,expression:"ruleForm.type"}],domProps:{value:s.ruleForm.type},on:{input:function(t){s.ruleForm.type=t}}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动
},on:{input:function(t){s.ruleForm2.age=s._n(t)},blur:function(t){s.$forceUpdate()}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"确认密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hlj
},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form 表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-xing-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xing-nei-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 行内表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义校验规则")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减表单项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("表单数据对象")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("行内表单模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("表单域标签的位置")]),a("td",[s._v("string")]),a("td",[s._v("right/left/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("表单域标签的后缀")]),a("td",[s.
staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("额外提供了 "),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v(" 两种尺寸的数字输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的
directives:[{name:"model",rawName:"v-model",value:s.input7,expression:"input7"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input7},on:{input:function(t){s.input7=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input8,expression:"input8"}],attrs:{size:"small",placeholder:"请输入内容"},domProps:{value:s.input8},on:{input:function(t){s.input8=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input9,expression:"input9"}],attrs:{size:"mini",placeholder:"请输入内容"},domProps:{value:s.input9},on:{input:function(t){s.input9=t}}})],1)]),a("p",[s._v("可通过 "),a("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  d
style:"\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state3,expression:"state3"}],attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容",icon:"edit","on-icon-click":s.handleIconClick},domProps:{value:s.state3},on:{select:s.handleSelect,input:function(t){s.state3=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-zh"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-zh'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "
staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "
attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),a("code",[s._v("span")]),s._v(" 属性我们就可以自由地组合布局。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">"
})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("通过制定 col 组件的 "),a("code",[s._v("offset")]),s._v(" 属性可以指定分栏偏移的栏数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a
staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-jian-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hun-he-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸："),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("和"),a("code",[s._v("lg")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("栅格间隔")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("布局模式，可选 flex，现代浏览器下有效")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("flex 布局下的水平排列方式")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("flex 布局下的垂直排列方式")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;ret
staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class"
staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu 导航菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ding-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 顶栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ce-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 侧栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("模式")]),a("td",[s._v("string")]),a("td",[s._v("horizontal,vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("主题色")]),a("td",[s._v("s
}]}},function(s,t,a){s.exports=a(395)},function(s,t,a){var l=a(13)(a(396),a(397),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),s._m(1),a("p",[s._v("从顶部出现，3 秒后自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">打开消息提示</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("打开消息提示"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n   
style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    偏移的消息\n  ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    偏移的消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("p",[s._v("单独引入 Notification：")]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification-tong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 "),a("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),a("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticC
script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),a("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),a("p",[s._v("设置索引"),a("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),a("code",[s._v("v-popover")]),s._v("，指向索引ID。"),a("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" 和 "),a("code",[s._v("focus")]),s._v("。第二种用法通过 "),a("code",[s._v("slot")]),s._v(" 指定 reference。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{stat
staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[a("strong",[s._v("百分比（必填）")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("进度条类型")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("进度条的宽度，单位 px")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("进度条当前状态")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),a("td",[s._v("number")]),a("td"),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示进度条文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(420)},function(s,t,a){var l=a(13)(null,a(421),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"kuai-su-shang-
},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{stat
},on:{input:function(t){s.value=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-b
style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{placeholder:"请选择"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}},s._l(s.options3,function(t){return a("el-option-group",{attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("使用"),a("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),a("code",[s._v("label")]),s._v("属性为分组名")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'热门城市'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("选中值发生变化时触发")]),a("td",[s._v("目前的选中值")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("分组的组名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否将该分组下所有选项置为禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("选项的值")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项的标签，若不设置则默认与 "),a("code",[s._v("value")]),s._v(" 相同")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(439)},function(s,t,a){a(440);var l=a(13)(a(442),a(443),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:42,value4:0,value5:0,value6:0,value7:[4,8]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过拖动滑块在一个固定区间内进行选择")]),s._m(1),a("p",[s._v("在拖动滑块时，显示当前值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value3" disabled></el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 42\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a(
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n  <el-step title="步骤 1" icon="edit"></el-step>\n  <el-step title="步骤 2" icon="upload"></el-step>\n  <el-step title="步骤 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"picture"}})],1)],1),a("p",[s._v("通过"),a("code",[s._v("icon")]),s._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),a("code",[s._v("slot")]),s._v("来使用自定义的图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span"
style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[a("code",[s._v("stripe")]),s._v("属性可以创建带斑马纹的表格。它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即为启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name
},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("查看")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("编辑")])]}}})],1)]],2),a("p",[s._v("固定列需要使用"),a("code",[s._v("fixed")]),s._v("属性，它接受 Boolean 值或者"),a("code",[s._v("left")]),a("code",[s._v("right")]),s._v("，表示左边固定还是右边固定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s.
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"h
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("nu
},[s._v("'公司'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column label="日期" width="180">\n      <template scope="scope">\n        <el-icon name="time"></el-icon>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column label="姓名" width="180">\n      <template scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag>{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label="操作">\n      <template scope="scope">\n        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:{default:function(t){return[a("el-icon",{attrs
staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table 表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带斑马纹表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带边框表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带状态表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[s._v("
},[a("i",{staticClass:"el-icon-date"}),s._v(" 我的行程")]),s._v("\n    我的行程\n  ")]),a("el-tab-pane",{attrs:{label:"消息中心"}},[s._v("消息中心")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" 我的行程"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    我的行程\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n  <el-tab-pane v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableT
},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签四'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签五'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签六'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">\n{{tag}}\n</el-tag>\n<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicTags: ['标签一', '标签二', '标签三'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = '';\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.inputValue,expression:"inputValue"}],ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},domProps:{value:s.inputValue},on:{blur:s.handleInputConfirm,input:function(t){s.inputValue=t}},nativeOn:{keyup:function(t){s._k(t.keyCode,"enter",13)||s.handleInputConfirm(t)}}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{s
script:null,style:"\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[a("el-button",[s._v("上左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[a("el-button",[s._v("上边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[a("el-button",[s._v("上右")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[a("el-button",[s._v("左上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[a("el-button",[s._v("左边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[a("el-button",[s._v("左下")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[a("el-button",[s._v("右上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[a("el-button",[s._v("右边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[a("el-button",[s._v("右下")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[a("el-button",[s._v("下左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[a("el-button",[s._v("下边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[a("el-button",[s._v("下右")])],1)],1)])]),a("p",[s._v("使用"),a("code",[s._v("content")]),s._v("属性来决定"),a("code",[s._v("hover")]),s._v("时的提示信息。由"),a("code",[s._v("placement")]),s._v("属性决定展示效果："),a("code",[s._v("placement")]),s._v("属性值为："),a("code",[s._v("方向-对齐位置")]),s._v("；四个方向："),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("、"),a("code",[s._v("right")]),s._v("、"),a("code",[s._v("bottom")]),s._v("；三种对齐位置："),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v("，默认为空。如"),a("code",[s._v('placement="left-end"')]),s._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ef
staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{stat
staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" :props="defaultProps" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">\n</el-tree>\n\n\n',script:"\n  let id = 1000;\n\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n  \n      renderContent(h, { node, data, store }) {\n        return (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style=\"float: right; margin-right: 20px\">\n              <el-button size=\"mini\" on-click={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticCla
var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography 字体")]),a("p",[s._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),a("h3",{attrs:{id:"zhong-wen-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中文字体")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 英文／数字字体")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family-dai-ma"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family 代码")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"zi-ti-shi-yong-gui-fan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 字体使用规范")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("主标题")]),a("td",{staticClass:"h1"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("标题")]),a("td",{staticClass:"h2"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("小标题")]),a("td",{staticClass:"h3"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("正文")]),a("td",{staticClass:"text-regular"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("正文（小）")]),a("td",{staticClass:"text-small"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("辅助文字")]),a("td",{staticClass:"text-smaller"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-da
staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag="" action="//jsonplaceholder.typicode.com/posts/" mutiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"//jsonplaceholder.typicode.com/posts/",mutiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("将文件拖到此处，或"),a("em",[s._v("点击上传")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("mutiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="//jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload
},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk
},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNj
},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){a(564);var l=a(13)(a(566),a(567),"data-v-b2da9546",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(555),e=l(n);t.default={mounted:function(){function s(t){t.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师",1800,-5,700).addScene("产品经理",1800,-4,600).addScene("前端工程师",1800,-5,800).addScene(function(a){s(t),a()})}var t=(0,e.default)();t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:.5,accuracy:1}).addScene(2600).addScene("line2:只为守护世界和平",300,-6,1e3).addScene("让你少加班",300,-5).addScene("line2:只为这样的你: ",400).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(558),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(559),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(560),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(561),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:a(562),alt:"Element"}})])])}]}},function(s,t,a){var l=a(13)(a(569),a(575),null,null);s.exports=l.exports},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(570),e=l(n);t.default={components:{PlayComponent:e.default}}},function(s,t,a){a(571);var l=a(13)(a(573),a(574),"data-v-253c8cb7",null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{},data:function(){return{value:"#bfcbd9",value2:null}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("el-button",{on:{click:function(t){s.value="#fff"}}},[s._v("Change Value")]),a("div",[s._v("Value: "+s._s(s.value))]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],domProps:{value:s.value},on:{input:function(t){s.value=t}}}),a("div",[s._v("Value2: "+s._s(s.value2))]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"show-alpha":""},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticStyle:{margin:"20p
return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}})],1)})):s._e(),t.groups?s._l(t.groups,function(t){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._v(s._s(t.groupName))]),a("ul",{staticClass:"pure-menu-list"},s._l(t.list,function(t){return t.disabled?s._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title)}})],1)}))])}):s._e()],2)}))],1)},staticRenderFns:[]}},function(s,t,a){a(994);var l=a(13)(a(996),a(997),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(23),e=l(n);t.default={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var s=this,t=e.default[this.lang];this.nav=t[0].children.concat(t[1]),t[2].groups.map(function(s){return s.list}).forEach(function(t){s.nav=s.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var s=0,t=this.nav.length;s<t;s++)if(this.nav[s].path===this.currentComponent){this.currentIndex=s;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(s){this.$router.push("/"+this.lang+"/component"+("prev"===s?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"footer-nav"},[s.leftNav?a("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[a("i",{staticClass:"el-icon-arrow-left"}),s._v("\n    "+s._s(s.leftNav.title||s.leftNav.name)+"\n  ")]):s._e(),s.rightNav?a("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},[s._v("\n    "+s._s(s.rightNav.title||s.rightNav.name)+"\n    "),a("i",{staticClass:"el-icon-arrow-right"})]):s._e()])},staticRenderFns:[]}},function(s,t){s.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"}}},function(s,t){function a(){return"serviceWorker"in navigator&&(window.fetch||"imageRendering"in document.documentElement.style)&&("https:"===window.location.protocol||"localhost"===window.location.hostname)}function l(s){if(s||(s={}),a()){navigator.serviceWorker.register("sw.js")}else if(window.applicationCache){var t="appcache/",l="manifest",n=function(){var s=t+l+".html",a=document.createElement("iframe");a.src=s,a.style.display="none",i=a,document.body.appendChild(a)};return void("complete"===document.readyState?setTimeout(n):window.addEventListener("load",n))}}function n(s,t){}function e(){a()&&navigator.serviceWorker.getRegistration().then(function(s){if(s)return s.update()}),i&&i.contentWindow.applicationCache.update()}var i;t.install=l,t.applyUpdate=n,t.update=e}]);