(window.webpackJsonp=window.webpackJsonp||[]).push([[4],Array(171).concat([function(s,a,t){var e={"./changelog.vue":545,"./component.vue":620,"./design.vue":660,"./guide.vue":618,"./index.vue":617,"./nav.vue":616,"./resource.vue":661};function r(s){var a=l(s);return t(a)}function l(s){var a=e[s];if(!(a+1)){var t=new Error("Cannot find module '"+s+"'");throw t.code="MODULE_NOT_FOUND",t}return a}r.keys=function(){return Object.keys(e)},r.resolve=l,s.exports=r,r.id=171},,,function(s,a,t){var e={"./es/alert.md":649,"./es/badge.md":651,"./es/breadcrumb.md":682,"./es/button.md":652,"./es/card.md":643,"./es/carousel.md":642,"./es/cascader.md":641,"./es/checkbox.md":506,"./es/collapse.md":640,"./es/color-picker.md":639,"./es/color.md":655,"./es/container.md":632,"./es/custom-theme.md":658,"./es/date-picker.md":511,"./es/datetime-picker.md":513,"./es/dialog.md":515,"./es/dropdown.md":621,"./es/form.md":581,"./es/i18n.md":681,"./es/icon.md":563,"./es/input-number.md":560,"./es/input.md":559,"./es/installation.md":687,"./es/layout.md":686,"./es/loading.md":555,"./es/menu.md":572,"./es/message-box.md":584,"./es/message.md":525,"./es/notification.md":526,"./es/pagination.md":589,"./es/popover.md":597,"./es/progress.md":669,"./es/quickstart.md":667,"./es/radio.md":530,"./es/rate.md":605,"./es/select.md":623,"./es/slider.md":626,"./es/steps.md":633,"./es/switch.md":647,"./es/table.md":646,"./es/tabs.md":644,"./es/tag.md":629,"./es/time-picker.md":582,"./es/tooltip.md":554,"./es/transfer.md":553,"./es/transition.md":540,"./es/tree.md":622,"./es/typography.md":674,"./es/upload.md":583};function r(s){var a=l(s);return t(a)}function l(s){var a=e[s];if(!(a+1)){var t=new Error("Cannot find module '"+s+"'");throw t.code="MODULE_NOT_FOUND",t}return a}r.keys=function(){return Object.keys(e)},r.resolve=l,s.exports=r,r.id=174},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(339),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){var t=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["seleccionado y deshabilitado","Opción A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"valid",checkAll:!1,cities:t,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?t:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var a=s.length;this.checkAll=a===this.cities.length,this.isIndeterminate=a>0&&a<this.cities.length}}}},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(345),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={data:function(){return{pickerOptions1:{disabledDate:function(s){return s.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var a=new Date;a.setTime(a.getTime()-864e5),s.$emit("pick",a)}},{text:"A week ago",onClick:function(s){var a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",a)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",[t,a])}},{text:"Last month",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-2592e6),s.$emit("pick",[t,a])}},{text:"Last 3 months",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-7776e6),s.$emit("pick",[t,a])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:""}}}},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(348),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var a=new Date;a.setTime(a.getTime()-864e5),s.$emit("pick",a)}},{text:"A week ago",onClick:function(s){var a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",a)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",[t,a])}},{text:"Last month",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-2592e6),s.$emit("pick",[t,a])}},{text:"Last 3 months",onClick:function(s){var a=new Date,t=new Date;t.setTime(t.getTime()-7776e6),s.$emit("pick",[t,a])}}]},value1:"",value2:"",value3:"",value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:"",value6:"",value7:""}}}},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(351),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,outerVisible:!1,innerVisible:!1,centerDialogVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(a){s()}).catch(function(s){})}}}},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(362),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})},openCenter:function(){this.$message({message:"Centered text",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}}},function(s,a,t){"use strict";t.r(a);var e=t(364),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})},open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})},open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})},onClose:function(){console.log("Notification is closed")}}}},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(369),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){"use strict";t.r(a);var e=t(380),r=t.n(e);for(var l in e)"default"!==l&&function(s){t.d(a,s,function(){return e[s]})}(l);a.default=r.a},function(s,a){s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,a,t){},function(s,a,t){},function(s,a,t){},function(s,a,t){},,,,,,,,,,,,,,,function(s,a,t){"use strict";var e=t(213);t.n(e).a},function(s,a,t){"use strict";var e=t(214);t.n(e).a},function(s,a,t){"use strict";var e=t(215);t.n(e).a},function(s,a,t){"use strict";var e=t(216);t.n(e).a},function(s,a,t){"use strict";var e=t(217);t.n(e).a},function(s,a,t){"use strict";var e=t(218);t.n(e).a},function(s,a,t){"use strict";var e=t(219);t.n(e).a},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,a,t){"use strict";var e=t(332);t.n(e).a},function(s,a,t){"use strict";var e=t(333);t.n(e).a},function(s,a,t){"use strict";var e=t(334);t.n(e).a},function(s,a,t){"use strict";var e=t(335);t.n(e).a},function(s,a,t){"use strict";var e=t(336);t.n(e).a},function(s,a,t){"use strict";var e=t(337);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(709),r=t(338);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="checkbox.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(340);t.n(e).a},function(s,a,t){"use strict";var e=t(341);t.n(e).a},function(s,a,t){"use strict";var e=t(342);t.n(e).a},function(s,a,t){"use strict";var e=t(343);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(710),r=t(344);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);t(512);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="date-picker.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(346);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(711),r=t(347);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);t(514);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="datetime-picker.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(349);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(712),r=t(350);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);t(516);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="dialog.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(352);t.n(e).a},function(s,a,t){"use strict";var e=t(353);t.n(e).a},function(s,a,t){"use strict";var e=t(354);t.n(e).a},function(s,a,t){"use strict";var e=t(355);t.n(e).a},function(s,a,t){"use strict";var e=t(356);t.n(e).a},function(s,a,t){"use strict";var e=t(357);t.n(e).a},function(s,a,t){"use strict";var e=t(358);t.n(e).a},function(s,a,t){"use strict";var e=t(359);t.n(e).a},function(s,a,t){"use strict";var e=t(360);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(692),r=t(361);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="message.md",a.default=p.exports},function(s,a,t){"use strict";t.r(a);var e=t(691),r=t(363);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="notification.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(365);t.n(e).a},function(s,a,t){"use strict";var e=t(366);t.n(e).a},function(s,a,t){"use strict";var e=t(367);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(690),r=t(368);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="radio.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(370);t.n(e).a},function(s,a,t){"use strict";var e=t(371);t.n(e).a},function(s,a,t){"use strict";var e=t(372);t.n(e).a},function(s,a,t){"use strict";var e=t(373);t.n(e).a},function(s,a,t){"use strict";var e=t(374);t.n(e).a},function(s,a,t){"use strict";var e=t(375);t.n(e).a},function(s,a,t){"use strict";var e=t(376);t.n(e).a},function(s,a,t){"use strict";var e=t(377);t.n(e).a},function(s,a,t){"use strict";var e=t(378);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(700),r=t(379);for(var l in r)"default"!==l&&function(s){t.d(a,s,function(){return r[s]})}(l);t(541);var n=t(0),p=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);p.options.__file="transition.md",a.default=p.exports},function(s,a,t){"use strict";var e=t(381);t.n(e).a},function(s,a,t){"use strict";var e=t(382);t.n(e).a},function(s,a,t){"use strict";var e=t(383);t.n(e).a},function(s,a,t){"use strict";var e=t(384);t.n(e).a},function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),t("h3",{attrs:{id:"2-5-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.5.2")]),t("p",[t("em",[s._v("2019-01-27")])]),t("h4",{attrs:{id:"optimization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Optimization")]),t("ul",[t("li",[s._v("Docs:\n"),t("ul",[t("li",[s._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),t("h4",{attrs:{id:"bug-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("Build:\n"),t("ul",[t("li",[s._v("Delete unremoved comments in umd module "),t("code",{pre:!0},[s._v("lib/index.js")]),s._v(" (by @island205 in #14233)")]),t("li",[s._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),t("li",[s._v("Fix 2.5.1 build issues  (by @iamkun in #14228)")])])])]),t("h3",{attrs:{id:"2-5-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.5.1")]),t("p",[t("em",[s._v("2019-01-26")])]),t("h4",{attrs:{id:"optimization-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Optimization")]),t("ul",[t("li",[s._v("DatePicker: resalta el mes y año actual (por @Debiancc en #14211)")]),t("li",[s._v("Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)")])]),t("h4",{attrs:{id:"bug-fixes-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)")]),t("li",[s._v("Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)")])]),t("h3",{attrs:{id:"2-5-0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.5.0")]),t("p",[t("em",[s._v("2019-01-25")])]),t("h4",{attrs:{id:"bug-fixes-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("Autocompletar\n"),t("ul",[t("li",[s._v("Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)")]),t("li",[s._v("Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)")])])]),t("li",[s._v("Carrusel\n"),t("ul",[t("li",[s._v("Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)")])])]),t("li",[s._v("Cascader\n"),t("ul",[t("li",[s._v("Retirada de los props computados obsoletos (#13737) (por @iamkun)")]),t("li",[s._v("Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)")]),t("li",[s._v("Corregido icono que cubre el texto (#13596) (por @ziyoung)")])])]),t("li",[s._v("Checkbox\n"),t("ul",[t("li",[s._v("Refinado el estilo (por @PanJiaChen)")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Añade el "),t("code",{pre:!0},[s._v("key")]),s._v(" en v-for de TimeSpinner (#13547) (por @Ende93)")]),t("li",[s._v("Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)")])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)")])])]),t("li",[s._v("Pagination\n"),t("ul",[t("li",[s._v("El valor de entrada no será menor que 1 (#13727) (por @elfman)")])])]),t("li",[s._v("Popover\n"),t("ul",[t("li",[s._v("Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)")]),t("li",[s._v("Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)")])])]),t("li",[s._v("Radio\n"),t("ul",[t("li",[s._v("Refinado el estilo (por @ohhoney1)")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)")]),t("li",[s._v("Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)")]),t("li",[s._v("Corregida la documentación del tipo de índice  (#13628) (por @ilovefafa)")]),t("li",[s._v("Corrección del problema de visualización de "),t("code",{pre:!0},[s._v("show-summary")]),s._v(" cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)")])])]),t("li",[s._v("Tabs\n"),t("ul",[t("li",[s._v("Corregido error de autodesplazamiento (#13696) (por @iamkun)")]),t("li",[s._v("Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)")]),t("li",[s._v("Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Corregido que "),t("code",{pre:!0},[s._v("showCheckbox")]),s._v(" prop en "),t("code",{pre:!0},[s._v("Tree")]),s._v(" no puede afectar a los hijos "),t("code",{pre:!0},[s._v("tree-node")]),s._v(" (por @KidneyFlower)")]),t("li",[s._v("Actualizado documento y archivo de definición (#13540) (por @ziyoung)")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("Agregada la prop "),t("code",{pre:!0},[s._v("url")]),s._v(" para subir el archivo cuando "),t("code",{pre:!0},[s._v("list-type")]),s._v(" cambia (#13771) (por @elfman)")])])]),t("li",[s._v("Slider\n"),t("ul",[t("li",[s._v("Corrección de la sangría del código fuente (#13955) (por @wacky6)")])])]),t("li",[s._v("I18n\n"),t("ul",[t("li",[s._v("Añadidas las traducciones de catalán que faltaban (por @jaumesala)")]),t("li",[s._v("Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)")]),t("li",[s._v("Corrección de las traducciones al finés (#14137) (por @jenkrisu)")])])]),t("li",[s._v("Doc\n"),t("ul",[t("li",[s._v("Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)")])])]),t("li",[s._v("Otros\n"),t("ul",[t("li",[s._v("Eliminar  scripts innecesarios (por @ziyoung)")]),t("li",[s._v("Corregido el error de anchor link (#13753) (por @iamkun)")]),t("li",[s._v("Corrección de la capitalización inconsistente en la documentación (por @wonderjar)")]),t("li",[s._v("Añadido código qr del grupo de chat DingDing al readme (#13957) (by @iamkun)")]),t("li",[s._v("Añadido logs de hilo a .gitignore (#13922) (por @mimimi)")]),t("li",[s._v("Eliminada la cuota de patrocinadores (#14156) (por @island205)")]),t("li",[s._v("Actualizado readme qr code src (#13960) (por @iamkun)")]),t("li",[s._v("Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)")])])])]),t("h3",{attrs:{id:"2-4-11"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.11")]),t("p",[t("em",[s._v("2018-11-21")])]),t("ul",[t("li",[s._v("Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478")]),t("li",[s._v("Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)")])]),t("h3",{attrs:{id:"2-4-10"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.10")]),t("p",[t("em",[s._v("2018-11-16")])]),t("ul",[t("li",[s._v("Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268")]),t("li",[s._v("El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208")]),t("li",[s._v("Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),t("li",[s._v("Se agregó el atributo "),t("code",{pre:!0},[s._v("loop")]),s._v(" al componente carrusel, #13217")]),t("li",[s._v("Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200")]),t("li",[s._v("Table header scoped slot puede recibir parámetros, #13263")]),t("li",[s._v("El método "),t("code",{pre:!0},[s._v("clearFilter")]),s._v(" de la tabla soporta argumentos, #13176")]),t("li",[s._v("El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)")]),t("li",[s._v("El contenido del input del panel ColorPicker se muestra correctamente, #13278")]),t("li",[s._v("ColorPicker ya no activa la validación de formularios al arrastrar, #13299")]),t("li",[s._v("InputNumber se le ha añadido el método "),t("code",{pre:!0},[s._v("select")]),s._v(", #13286 (por @st-sloth)")]),t("li",[s._v("Autocompletar agregó el evento "),t("code",{pre:!0},[s._v("clear")]),s._v(", #12171(by arthurdenner) #13326")]),t("li",[s._v("Puede cerrar Menú haciendo clic fuera del Menú, #13296")]),t("li",[s._v("El método "),t("code",{pre:!0},[s._v("validateField")]),s._v(" de Form puede recibir argumentos, #13319")]),t("li",[s._v("Cascader añadió el evento "),t("code",{pre:!0},[s._v("visible-change")]),s._v(", #13415")]),t("li",[s._v("DatePicker agregó slot para separador de rango, #13272 (por @milworm)")]),t("li",[s._v("Tree añade las propiedades "),t("code",{pre:!0},[s._v("iconClass")]),s._v(" y "),t("code",{pre:!0},[s._v("currentNodeKey")]),s._v(", #13337 #13197 (por @isnifer)")]),t("li",[s._v("Progress permite texto en el atributo "),t("code",{pre:!0},[s._v("status")]),s._v(" #13198 (por @ali-master)")]),t("li",[s._v("Corregidas las "),t("code",{pre:!0},[s._v("defaultCheckedKeys")]),s._v(" de Tree que causaba un error, #13349 (por @dive2Pro)")])]),t("h3",{attrs:{id:"2-4-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.9")]),t("p",[t("em",[s._v("2018-10-26")])]),t("ul",[t("li",[s._v("El parámetro de Form's "),t("code",{pre:!0},[s._v("clearValidate")]),s._v(" soporta cadenas, #12990 (by @codinglobster)")]),t("li",[s._v("Se agregó el atributo "),t("code",{pre:!0},[s._v("type")]),s._v(" para Badge, #12991")]),t("li",[s._v("Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)")]),t("li",[s._v("Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)")]),t("li",[s._v("La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)")]),t("li",[s._v("Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)")]),t("li",[s._v("Arreglado que el atributo size de Select no funcionaba, #13070")]),t("li",[s._v("Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)")]),t("li",[s._v("Arreglado el último TabNav que no se podía borrar, #13039")]),t("li",[s._v("Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178")]),t("li",[s._v("Añadido title slot para Alert, #13082 (by @Kingwl)")]),t("li",[s._v("Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)")]),t("li",[s._v("Optimizada la animación de Upload cuando el archivo es eliminado, #12987")]),t("li",[s._v("Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052")])]),t("h3",{attrs:{id:"2-4-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.8")]),t("ul",[t("li",[s._v("No se muestra el contorno cuando Switch está enfocado, #12771")]),t("li",[s._v("Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)")]),t("li",[s._v("Añadido evento opened para Dialog, #12828")]),t("li",[s._v("Corregido el orden incorrecto de visualización de TabNav, #12846")]),t("li",[s._v("Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948")]),t("li",[s._v("Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854")]),t("li",[s._v("El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)")]),t("li",[s._v("Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898")]),t("li",[s._v("Arreglado el problema de que el atributo "),t("code",{pre:!0},[s._v("render-header")]),s._v(" del encabezado de Table no funcionaba, #12914")])]),t("h3",{attrs:{id:"2-4-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.7")]),t("p",[t("em",[s._v("2018-09-14")])]),t("ul",[t("li",[s._v("Corregido que DatePicker no activaba la validación del Form, #12328 #12348")]),t("li",[s._v("Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347")]),t("li",[s._v("Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)")]),t("li",[s._v("Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)")]),t("li",[s._v("Corregida el input no resaltada en Cascader, #12341")]),t("li",[s._v("Corregido el orden incorrecto de Tabpane, #12346")]),t("li",[s._v("Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)")]),t("li",[s._v("Corregido el estilo del Submenú, #2457")]),t("li",[s._v("Corregido el resaltado después de seleccionar el Submenú, #12479")]),t("li",[s._v("Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)")]),t("li",[s._v("Corregido el valor incorrecto del input de Paginación, #12525")]),t("li",[s._v("Se ha corregido el orden en que la paginación desencadena los eventos, #12530")]),t("li",[s._v("Corregido que no se mostraba el Table Filter, #12539")]),t("li",[s._v("Corregido Tree que era incapaz de borrar nodos, #12684")]),t("li",[s._v("Corregida la altura de los Select Input que cambiaba en modo simple, #12719")]),t("li",[s._v("Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("autocomplete")]),s._v(" para Input, obsoleto "),t("code",{pre:!0},[s._v("auto-complete")]),s._v(", #12514 (por @axetroy)")]),t("li",[s._v("Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)")])]),t("h3",{attrs:{id:"2-4-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.6")]),t("p",[t("em",[s._v("2018-08-09")])]),t("ul",[t("li",[s._v("Arreglada la tabla que no mostraba el ícono del filtro cuando a  "),t("code",{pre:!0},[s._v("filter")]),s._v(" se les asignaba un array vacío, #12165")]),t("li",[s._v("Arreglado Menu que no guardaba el estado activo cuando cambiaba "),t("code",{pre:!0},[s._v("collapse")]),s._v(" #12178 (por @elfman)")]),t("li",[s._v("Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248")]),t("li",[s._v("Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262")]),t("li",[s._v("Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es "),t("code",{pre:!0},[s._v("undefined")]),s._v(",#12322")]),t("li",[s._v("Corregida la función de consulta de Select not debounced en modo multi, #12181")]),t("li",[s._v("Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304")]),t("li",[s._v("Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203")]),t("li",[s._v("Corregida la visualización incorrecta de Main en IE, #12237")]),t("li",[s._v("Corregido el trigger de Input con dos validaciones de Form, #12260")]),t("li",[s._v("Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256")]),t("li",[s._v("Arreglado el nodo Tree no se borraba después de arrastrar, #12279")]),t("li",[s._v("Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(" para Autocompletar, #12241")]),t("li",[s._v("Añadido el modificador "),t("code",{pre:!0},[s._v("sync")]),s._v(" para el atributo "),t("code",{pre:!0},[s._v("page-size")]),s._v(" de Pagination, #12281")])]),t("h3",{attrs:{id:"2-4-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.5")]),t("p",[t("em",[s._v("2018-07-26")])]),t("ul",[t("li",[s._v("Se ha corregido en Table que "),t("code",{pre:!0},[s._v("class-name")]),s._v(" no funcionaba para las columnas "),t("code",{pre:!0},[s._v("expand")]),s._v(", #12006")]),t("li",[s._v("Se ha añadido el método "),t("code",{pre:!0},[s._v("toggleAllSelection")]),s._v(" para Table, #12047")]),t("li",[s._v("Corregida la posición incorrecta del "),t("code",{pre:!0},[s._v("suffix slot")]),s._v(" cuando Input contiene Select, #12108")]),t("li",[s._v("Corregido que el "),t("code",{pre:!0},[s._v("line-height")]),s._v(" de Option no se establecia, #12120")]),t("li",[s._v("Corregido que TimeSelect con valor por defecto "),t("code",{pre:!0},[s._v("null")]),s._v(" no podia ser asignado después de ejecutar "),t("code",{pre:!0},[s._v("resetField")]),s._v(", #12010")]),t("li",[s._v("Arreglado el evento "),t("code",{pre:!0},[s._v("keydown")]),s._v(" que cuando no era una tecla de flecha no funciona en Tree, #12008")]),t("li",[s._v("Corregido nodo padre checked en modo lazy, #12106")]),t("li",[s._v("Añadido el parámetro "),t("code",{pre:!0},[s._v("includeHalfChecked")]),s._v(" para getCheckedNodes de Tree, #12014")])]),t("h3",{attrs:{id:"2-4-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.4")]),t("p",[t("em",[s._v("2018-07-13")])]),t("ul",[t("li",[s._v("Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837")]),t("li",[s._v("Corregida la posición incorrecta del slot Input "),t("code",{pre:!0},[s._v("suffix")]),s._v("  cuando se usaba el slot "),t("code",{pre:!0},[s._v("suffix")]),s._v(" con el slot  "),t("code",{pre:!0},[s._v("append")]),s._v("  , #11951")]),t("li",[s._v("Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967")]),t("li",[s._v("Arreglado el nodo Tree checked cuando estaba disabled, #11847")]),t("li",[s._v("Corregido que  "),t("code",{pre:!0},[s._v("default-checked-keys")]),s._v("  no funcionaba en Tree, #11971")]),t("li",[s._v("Corregido que el "),t("code",{pre:!0},[s._v("empty-text")]),s._v(" no era visible cuando el nodo Tree se filtraba, #11971")]),t("li",[s._v("Arreglada la posición de texto vacío sobredimensionado en Table, #11965")]),t("li",[s._v("Corregido que la fila de la tabla no se modificado el resaltado cuando "),t("code",{pre:!0},[s._v("current-row-key")]),s._v(" era asignada a null, #11866")]),t("li",[s._v("Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864")]),t("li",[s._v("Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912")])]),t("h3",{attrs:{id:"2-4-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.3")]),t("p",[t("em",[s._v("2018-07-03")])]),t("ul",[t("li",[s._v("Corregido "),t("code",{pre:!0},[s._v("allow-drop")]),s._v(" que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797")]),t("li",[s._v("Ahora puede pasar un parámetro al método "),t("code",{pre:!0},[s._v("clearValidate")]),s._v(" de Form, especificando qué resultados de validación de "),t("code",{pre:!0},[s._v("FormItems")]),s._v(" necesita borrar, #11821")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("distinguishCancelAndClose")]),s._v(" para MessageBox, #11831")])]),t("h3",{attrs:{id:"2-4-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.2")]),t("p",[t("em",[s._v("2018-06-26")])]),t("ul",[t("li",[s._v("Ahora el "),t("code",{pre:!0},[s._v("class-name")]),s._v(" y el "),t("code",{pre:!0},[s._v("label-class-name")]),s._v(" de la tabla son reactivos, #11626")]),t("li",[s._v("Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  "),t("code",{pre:!0},[s._v("highlight-current-row")]),s._v(" era "),t("code",{pre:!0},[s._v("false")]),s._v(", #11646")]),t("li",[s._v("Corregido un error de estilo de ButtonGroup cuando sólo habia un botón "),t("code",{pre:!0},[s._v("round")]),s._v(" o "),t("code",{pre:!0},[s._v("circle")]),s._v(", #11605")]),t("li",[s._v("Arreglado estilo del tamaño de página del Select de Pagination, #11622")]),t("li",[s._v("Corregido un error del método "),t("code",{pre:!0},[s._v("open")]),s._v("  de los Menús cuando se cambiaba dinámicamente "),t("code",{pre:!0},[s._v("collapse")]),s._v(", #11646")]),t("li",[s._v("Añadidos los parámetros "),t("code",{pre:!0},[s._v("activeName")]),s._v(" y "),t("code",{pre:!0},[s._v("oldActiveName")]),s._v(" al gancho before-leave de Tabs, #11713")]),t("li",[s._v("Arreglado el focus en Cascader después de hacer clic fuera, #11588")]),t("li",[s._v("Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando "),t("code",{pre:!0},[s._v("change-on-select")]),s._v(" como "),t("code",{pre:!0},[s._v("true")]),s._v(", #11623")]),t("li",[s._v("Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672")])]),t("h3",{attrs:{id:"2-4-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.1")]),t("p",[t("em",[s._v("2018-06-08")])]),t("ul",[t("li",[s._v("Removida la declaración duplicada de type en Autocompletar, #11388")]),t("li",[s._v("Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427")]),t("li",[s._v("Corregido que el ícono "),t("code",{pre:!0},[s._v("clear")]),s._v(" de Select seguia apareciendo cuando el valor inicial era "),t("code",{pre:!0},[s._v("null")]),s._v(", #11460")]),t("li",[s._v("Arreglado que cuando el radio estaba "),t("code",{pre:!0},[s._v("disabled")]),s._v(" mostraba el box-shadow al hacer click, #11462")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("iconClass")]),s._v(" para MessageBox, #11499")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("stretch")]),s._v(" para Tabs, #11476")]),t("li",[s._v("Arreglado el problema de orden de renderizado de TabPane cuando Tabs es "),t("code",{pre:!0},[s._v("lazy")]),s._v(", #11461")]),t("li",[s._v("Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464")]),t("li",[s._v("Arreglado que  focusing state cuando "),t("code",{pre:!0},[s._v("before-leave")]),s._v(" devolvia una promesa resuelta, #11386")]),t("li",[s._v("Arreglado que Popover deshabilitado seguia creando poppers, #11426")]),t("li",[s._v("Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo "),t("code",{pre:!0},[s._v("lazy")]),s._v(", #11430 (por @wangjingf)")]),t("li",[s._v("Añadido el evento "),t("code",{pre:!0},[s._v("closed")]),s._v(" para Dialog, #11490")])]),t("h3",{attrs:{id:"2-4-0-fullerene"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.0 Fullerene")]),t("p",[t("em",[s._v("2018-05-28")])]),t("h4",{attrs:{id:"nuevas-caracteristicas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nuevas características")]),t("ul",[t("li",[s._v("Generalidades\n"),t("ul",[t("li",[s._v("La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216")]),t("li",[s._v("Ahora puede configurar globalmente el z-index inicial de los popups, #11257")])])]),t("li",[s._v("Autocomplete\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("hide-loading")]),s._v(", #11260")])])]),t("li",[s._v("Button\n"),t("ul",[t("li",[s._v("Ahora se puede usar el atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" en los botones circulares para controlar sus tamaños, #11275")])])]),t("li",[s._v("InputNumber\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("precision")]),s._v(", #11281")])])]),t("li",[s._v("Tabs\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("before-leave")]),s._v(", #11259")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("lazy")]),s._v(", #11167（by @Kingwl）")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("sort")]),s._v(" para ordenar manualmente la tabla, #11311")])])])]),t("h4",{attrs:{id:"correccion-de-errores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#correccion-de-errores","aria-hidden":"true"}},[s._v("¶")]),s._v(" Corrección de errores")]),t("ul",[t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).")])])]),t("li",[s._v("Popover\n"),t("ul",[t("li",[s._v("Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265")])])]),t("li",[s._v("Breadcrumb\n"),t("ul",[t("li",[s._v("Arreglado el atributo "),t("code",{pre:!0},[s._v("to")]),s._v(" que no soportaba la actualización dinámica, #11286")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método "),t("code",{pre:!0},[s._v("beforeUpload")]),s._v(", #11297 (por @qusiba)")])])]),t("li",[s._v("Tooltip\n"),t("ul",[t("li",[s._v("Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335")])])]),t("li",[s._v("Autocompletar\n"),t("ul",[t("li",[s._v("Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323")])])]),t("li",[s._v("ColorPicker\n"),t("ul",[t("li",[s._v("Corregido el evento "),t("code",{pre:!0},[s._v("active-change")]),s._v(" que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314")]),t("li",[s._v("Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348")])])]),t("li",[s._v("CheckBox\n"),t("ul",[t("li",[s._v("Arreglado que cuando el checkbox era único no soportaba validación, #11271")])])]),t("li",[s._v("Radio\n"),t("ul",[t("li",[s._v("Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303")])])]),t("li",[s._v("MessageBox\n"),t("ul",[t("li",[s._v("Corregida la clase "),t("code",{pre:!0},[s._v("el-popup-parent--hidden")]),s._v(" que no se eliminaba al abrir MessageBox sucesivamente, #11371")])])])]),t("h3",{attrs:{id:"2-3-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.9")]),t("p",[t("em",[s._v("2018-05-18")])]),t("ul",[t("li",[s._v("Corregido que cuando los datos de origen no tenian el campo especificado por el atributo "),t("code",{pre:!0},[s._v("prop")]),s._v(" de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.")]),t("li",[s._v("El atributo "),t("code",{pre:!0},[s._v("lockScroll")]),s._v(" de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.")]),t("li",[s._v("Arreglado el icono de Progreso que no se mostraba cuando su "),t("code",{pre:!0},[s._v("status")]),s._v(" era "),t("code",{pre:!0},[s._v("exception")]),s._v(", #11172")]),t("li",[s._v("El atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" no funcionaba en la lista de resultados del filtro de Cascader, #11185")]),t("li",[s._v("Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.")]),t("li",[t("code",{pre:!0},[s._v("setCurrentKey")]),s._v(" de Tree ahora acepta "),t("code",{pre:!0},[s._v("null")]),s._v(" como parámetro para cancelar el nodo actualmente resaltado, #11205")])]),t("h3",{attrs:{id:"2-3-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.8")]),t("p",[t("em",[s._v("2018-05-11")])]),t("ul",[t("li",[s._v("Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era "),t("code",{pre:!0},[s._v("dates")]),s._v(", #10973")]),t("li",[s._v("Arreglado que el "),t("code",{pre:!0},[s._v("clearable Input")]),s._v(" seguía mostrando el icono de borrado cuando era sólo de lectura, #10912")]),t("li",[s._v("Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento "),t("code",{pre:!0},[s._v("change")]),s._v(", #11017")]),t("li",[s._v("Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058")]),t("li",[s._v("Agregado el "),t("code",{pre:!0},[s._v("slot named")]),t("code",{pre:!0},[s._v("prefix")]),s._v(" para Select, #11063")]),t("li",[s._v("Agregado  el metodo "),t("code",{pre:!0},[s._v("clearValidate")]),s._v(" para FormItem, #11076")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("checkOnClickNode")]),s._v(" para Tree, #11111")])]),t("h3",{attrs:{id:"2-3-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.7")]),t("p",[t("em",[s._v("2018-04-29")])]),t("ul",[t("li",[s._v("Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834")]),t("li",[s._v("Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era "),t("code",{pre:!0},[s._v("nulo")]),s._v(", #10912")]),t("li",[s._v("Corregido el disparador incorrecto del evento "),t("code",{pre:!0},[s._v("active-change")]),s._v(" después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)")]),t("li",[s._v("Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945")])]),t("h3",{attrs:{id:"2-3-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.6")]),t("p",[t("em",[s._v("2018-04-21")])]),t("ul",[t("li",[s._v("Corregido el comportamiento incorrecto del callback  "),t("code",{pre:!0},[s._v("allow-drop")]),s._v(" de Tree cuando se usaba el parámetro "),t("code",{pre:!0},[s._v("type")]),s._v(", #10821")]),t("li",[s._v("Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822")]),t("li",[s._v("Corregido Single Select activaba incorrectamente el evento "),t("code",{pre:!0},[s._v("blur")]),s._v(" después de hacer clic en una opción, #10822")])]),t("h3",{attrs:{id:"2-3-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.5")]),t("p",[t("em",[s._v("2018-04-20")])]),t("ul",[t("li",[s._v("Arreglado los incorrectos realces en el panel de DatePicker cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" es week, #10712")]),t("li",[s._v("Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714")]),t("li",[s._v("Agregado el atributo  "),t("code",{pre:!0},[s._v("automatic-dropdown")]),s._v(" para Select, #10042 (by @Seebiscuit)")]),t("li",[s._v("Arreglado que el valor del Rate pasaba a "),t("code",{pre:!0},[s._v("disabled")]),s._v(" cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)")]),t("li",[s._v("Ahora el atributo "),t("code",{pre:!0},[s._v("type")]),s._v(" de DatePicker's puede ser  "),t("code",{pre:!0},[s._v("'dates'")]),s._v(", donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)")]),t("li",[s._v("Agregados los eventos  "),t("code",{pre:!0},[s._v("prev-click")]),s._v(" y "),t("code",{pre:!0},[s._v("next-click")]),s._v(" para Pagination, #10755")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("pager-count")]),s._v(" para Pagination, #10493 (by @chongjohn716)")]),t("li",[s._v("Agregado "),t("code",{pre:!0},[s._v("type")]),s._v(" como 3rd parametro del atributo  "),t("code",{pre:!0},[s._v("allow-drop")]),s._v("  de Tree, #10792")]),t("li",[s._v("Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779")])]),t("h3",{attrs:{id:"2-3-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.4")]),t("p",[t("em",[s._v("2018-04-12")])]),t("ul",[t("li",[s._v("Eliminado el atributo duplicado  "),t("code",{pre:!0},[s._v("showTimeout")]),s._v(" en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)")]),t("li",[s._v("Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577")]),t("li",[s._v("Arreglado que los click de los botones "),t("code",{pre:!0},[s._v("next")]),s._v(" y "),t("code",{pre:!0},[s._v("prev")]),s._v("  en Pagination se deshabilitaban cuando se disparaba el evento  "),t("code",{pre:!0},[s._v("current-change")]),s._v(", #10628")]),t("li",[s._v("Arreglado que Textarea mostraba "),t("code",{pre:!0},[s._v("undefined")]),s._v(" en SSR cuando el valor no era asignado, #10630")]),t("li",[s._v("Arreglado que se deshabilitaba el estilo del TabItem cuando  "),t("code",{pre:!0},[s._v("type")]),s._v(" era border-card, #10640")]),t("li",[s._v("Agregado "),t("code",{pre:!0},[s._v("$index")]),s._v(" como cuarto parametro en el atributo de las columnas de Table  "),t("code",{pre:!0},[s._v("formatter")]),s._v(" , #10645")]),t("li",[s._v("Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666")])]),t("h3",{attrs:{id:"2-3-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.3")]),t("p",[t("em",[s._v("2018-04-04")])]),t("ul",[t("li",[s._v("Agregar atributo "),t("code",{pre:!0},[s._v("shadow")]),s._v(" para Card, #10418 (by @YunYouJun)")]),t("li",[s._v("Se ha corregido el error de ocultar Badge cuando "),t("code",{pre:!0},[s._v("value")]),s._v(" es "),t("code",{pre:!0},[s._v("0")]),s._v(", #10470")]),t("li",[s._v("Arreglados algunos bugs del draggable Tree, #10474 #10494")]),t("li",[s._v("Agregado "),t("code",{pre:!0},[s._v("placement")]),s._v(" para Autocomplete, #10475")]),t("li",[s._v("Ahora el atributo "),t("code",{pre:!0},[s._v("default-time")]),s._v(" también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)")]),t("li",[s._v("Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(" para SubMenu, #10515")]),t("li",[s._v("Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551")]),t("li",[s._v("Se ha corregido el evento "),t("code",{pre:!0},[s._v("change")]),s._v(" de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553")])]),t("h3",{attrs:{id:"2-3-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.2")]),t("p",[t("em",[s._v("2018-03-29")])]),t("ul",[t("li",[s._v("Arreglada una regresión de Autocompletar, #10442")])]),t("h3",{attrs:{id:"2-3-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.1")]),t("p",[t("em",[s._v("2018-03-29")])]),t("ul",[t("li",[s._v("Se ha corregido una regresión por la que el "),t("code",{pre:!0},[s._v("type")]),s._v(" de input no se transmitia al elemento de entrada nativo, #10415")]),t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("blur")]),s._v(" para Select, #10416")])]),t("h3",{attrs:{id:"2-3-0-diamond"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.0 Diamond")]),t("p",[t("em",[s._v("2018-03-28")])]),t("h4",{attrs:{id:"nuevas-caracteristicas-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nuevas características")]),t("ul",[t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Ahora "),t("code",{pre:!0},[s._v("formatter")]),s._v(" de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)")]),t("li",[s._v("Agregado el atributo  "),t("code",{pre:!0},[s._v("select-on-indeterminate")]),s._v(", #9924 (by @syn-zeta)")])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("collapse-transition")]),s._v(", #8809 (by @limichange)")])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("select")]),s._v(" , #10229")]),t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("blur")]),s._v(", #10356")])])]),t("li",[s._v("ColorPicker\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("predefine")]),s._v(", #10170 (by @elfman)")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Agregados los atributos "),t("code",{pre:!0},[s._v("draggable")]),s._v(", "),t("code",{pre:!0},[s._v("allow-drop")]),s._v(" y "),t("code",{pre:!0},[s._v("allow-drag")]),s._v(", y los eventos "),t("code",{pre:!0},[s._v("node-drag-start")]),s._v(", "),t("code",{pre:!0},[s._v("node-drag-enter")]),s._v(", "),t("code",{pre:!0},[s._v("node-drag-leave")]),s._v(", "),t("code",{pre:!0},[s._v("node-drag-over")]),s._v(", "),t("code",{pre:!0},[s._v("node-drag-end")]),s._v(" y "),t("code",{pre:!0},[s._v("node-drop")]),s._v(", #9251 #10372 (by @elfman)")])])]),t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("El metodo "),t("code",{pre:!0},[s._v("validate")]),s._v(" ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279")]),t("li",[s._v("Agregado el evento  "),t("code",{pre:!0},[s._v("validate")]),s._v(", #10351")])])]),t("li",[s._v("Progress\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("color")]),s._v(", #10352 (by @YunYouJun)")])])]),t("li",[s._v("Button\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("circle")]),s._v(", #10359 (by @YunYouJun)")])])])]),t("h4",{attrs:{id:"bug-s-arreglados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-s-arreglados","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug's arreglados")]),t("ul",[t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189")])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot "),t("code",{pre:!0},[s._v("title")]),s._v(" de MenuItem esté configurado, #10193 (by @PanJiaChen)")])])]),t("li",[s._v("Pagination\n"),t("ul",[t("li",[s._v("Corregido el evento  "),t("code",{pre:!0},[s._v("current-change")]),s._v("  que se disparaba erróneamente sin interacción del usuario, #10247")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo "),t("code",{pre:!0},[s._v("format")]),s._v(", #10174（by @remizovvv）")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("Solucionado el atributo "),t("code",{pre:!0},[s._v("accept")]),s._v(" no trabajaba cuando "),t("code",{pre:!0},[s._v("drag")]),s._v(" era true, #10278")])])])]),t("h3",{attrs:{id:"2-2-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.2")]),t("p",[t("em",[s._v("2018-03-14")])]),t("ul",[t("li",[s._v("Agregado el evento "),t("code",{pre:!0},[s._v("clear")]),s._v(" para Input, #9988 (by @blackmiaool)")]),t("li",[s._v("Ahora la entrada manual de ColorPicker soporta los modos "),t("code",{pre:!0},[s._v("hsl")]),s._v(", "),t("code",{pre:!0},[s._v("hsv")]),s._v(" y "),t("code",{pre:!0},[s._v("rgb")]),s._v(", #9991")]),t("li",[s._v("Arreglado DatePicker no desencadenaba el evento "),t("code",{pre:!0},[s._v("change")]),s._v(" cuando se borraba su valor inicial, #9986")]),t("li",[s._v("Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003")]),t("li",[s._v("Arreglado Table que con columnas "),t("code",{pre:!0},[s._v("fixed")]),s._v(" no actualizaban correctamente su altura si se fijaba "),t("code",{pre:!0},[s._v("max-height")]),s._v(", #10034")]),t("li",[s._v("Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(" para Pagination, #10006")]),t("li",[s._v("Agregados los eventos "),t("code",{pre:!0},[s._v("after-enter")]),s._v(" y "),t("code",{pre:!0},[s._v("after-leave")]),s._v(" para Popover, #10047")]),t("li",[s._v("Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar "),t("code",{pre:!0},[s._v("resetFields")]),s._v(" de Form, #10105")]),t("li",[s._v("Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130")]),t("li",[s._v("Corregido MessageBox heredaba el atributo "),t("code",{pre:!0},[s._v("title")]),s._v(" de su instancia anterior cuando se llamaba sin "),t("code",{pre:!0},[s._v("title")]),s._v(", #10126 (by @Pochodaydayup)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("input-size")]),s._v(" para Slider, #10154")]),t("li",[s._v("Agregados los eventos  "),t("code",{pre:!0},[s._v("left-check-change")]),s._v(" y "),t("code",{pre:!0},[s._v("right-check-change")]),s._v(" para Transfer, #10156")])]),t("h3",{attrs:{id:"2-2-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.1")]),t("p",[t("em",[s._v("2018-03-02")])]),t("ul",[t("li",[s._v("Corregido Aside, Header y Footer que se contraia en algunos layout, #9812")]),t("li",[s._v("Corregido Table con un atributo "),t("code",{pre:!0},[s._v("height")]),s._v("  no renderizaba en SSR, #9876")]),t("li",[s._v("Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484")]),t("li",[s._v("Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  "),t("code",{pre:!0},[s._v("change")]),s._v(", #9913")]),t("li",[s._v("Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("tooltip-class")]),s._v(" para Slider, #9957")]),t("li",[s._v("Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("target-order")]),s._v(" para Transfer, #9960")])]),t("h3",{attrs:{id:"2-2-0-graphite"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.0 Graphite")]),t("p",[t("em",[s._v("2018-02-12")])]),t("h4",{attrs:{id:"new-features"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Agregados los atributos  "),t("code",{pre:!0},[s._v("popper-class")]),s._v(" y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" para SubMenu, #9604 #9771")]),t("li",[s._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Agregado el evento "),t("code",{pre:!0},[s._v("node-contextmenu")]),s._v(", #9678")]),t("li",[s._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),t("li",[s._v("Agregados los metodos  "),t("code",{pre:!0},[s._v("getNode")]),s._v(", "),t("code",{pre:!0},[s._v("remove")]),s._v(", "),t("code",{pre:!0},[s._v("append")]),s._v(", "),t("code",{pre:!0},[s._v("insertBefore")]),s._v(", "),t("code",{pre:!0},[s._v("insertAfter")]),s._v(", "),t("code",{pre:!0},[s._v("getCheckedKeys")]),s._v(", "),t("code",{pre:!0},[s._v("getHalfCheckedNodes")]),s._v(", "),t("code",{pre:!0},[s._v("getHalfCheckedKeys")]),s._v(" y el evento "),t("code",{pre:!0},[s._v("check")]),s._v(", #9718 #9730")])])]),t("li",[s._v("Transfer\n"),t("ul",[t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("clearQuery")]),s._v(", #9753")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(", #9782")])])])]),t("h4",{attrs:{id:"bug-fixes-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[t("p",[s._v("Table")]),t("ul",[t("li",[s._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),t("code",{pre:!0},[s._v("row-click")]),s._v(", #9654")]),t("li",[s._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),t("li",[s._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),t("li",[t("p",[s._v("Container")]),t("ul",[t("li",[s._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),t("li",[t("p",[s._v("Loading")]),t("ul",[t("li",[s._v("Corregido Loading no se mostraba cuando el valor de "),t("code",{pre:!0},[s._v("v-loading")]),s._v(" era cambiado a true en el "),t("code",{pre:!0},[s._v("hook")]),t("code",{pre:!0},[s._v("mounted")]),s._v(", #9722")])])]),t("li",[t("p",[s._v("Switch")]),t("ul",[t("li",[t("p",[s._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),t("p",[s._v("​")])])])])]),t("h3",{attrs:{id:"2-1-0-charcoal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.1.0 Charcoal")]),t("p",[t("em",[s._v("2018-01-31")])]),t("h4",{attrs:{id:"new-features-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("Cascader\n"),t("ul",[t("li",[s._v("Agregados los eventos "),t("code",{pre:!0},[s._v("focus")]),s._v(" y "),t("code",{pre:!0},[s._v("blur")]),s._v(", #9184 (by @viewweiwu)")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("El "),t("code",{pre:!0},[s._v("filter-method")]),s._v(" ahora tiene un tercer parámetro "),t("code",{pre:!0},[s._v("column")]),s._v(", #9196 (by @liyanlong)")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Agregados los atributos "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("clear-icon")]),s._v(", #9237 (by @AdamSGit)")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("default-time")]),s._v(", #9094 (by @nighca)")]),t("li",[t("code",{pre:!0},[s._v("value-format")]),s._v(" ahora soporta "),t("code",{pre:!0},[s._v("timestamp")]),s._v(", #9319 (by @wacky6)")])])]),t("li",[s._v("InputNumber\n"),t("ul",[t("li",[s._v("Ahora el valor vinculado puede ser "),t("code",{pre:!0},[s._v("undefined")]),s._v(", #9361")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("auto-complete")]),s._v(", #9388")])])]),t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("disabled")]),s._v(", #9529")]),t("li",[s._v("Agregado el atributo "),t("code",{pre:!0},[s._v("validateOnRuleChange")]),s._v(", #8141")])])]),t("li",[s._v("Notification\n"),t("ul",[t("li",[s._v("Agregado el metodo "),t("code",{pre:!0},[s._v("closeAll")]),s._v(", #9514")])])])]),t("h4",{attrs:{id:"bug-fixes-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("InputNumber\n"),t("ul",[t("li",[s._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[s._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),t("li",[s._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),t("li",[s._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),t("li",[s._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),t("li",[s._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),t("li",[s._v("Corregido un error de calculo en el ancho de la columna cuando "),t("code",{pre:!0},[s._v("width")]),s._v(" cambiaba en TableColumn, #9426")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Corregido el metodo "),t("code",{pre:!0},[s._v("focus")]),s._v(" que no funcionaba en modo "),t("code",{pre:!0},[s._v("range")]),s._v(", #9437")]),t("li",[s._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),t("li",[s._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Corregido error de estilos en IE 11, #9454")])])])]),t("h4",{attrs:{id:"breaking-changes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),t("ul",[t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("El menú desplegable en modo "),t("code",{pre:!0},[s._v("collapse")]),s._v(" ahora se agrega directamente al "),t("code",{pre:!0},[s._v("body")]),s._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),t("code",{pre:!0},[s._v("row-click")]),s._v(", #9467")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("El "),t("code",{pre:!0},[s._v("z-index")]),s._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),t("code",{pre:!0},[s._v("z-index")]),s._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[s._v("Los atributos "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" y "),t("code",{pre:!0},[s._v("hide-timeout")]),s._v(" ahora solo trabajan si se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(", #9573")])])])]),t("h3",{attrs:{id:"2-0-11"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.11")]),t("p",[t("em",[s._v("2018-01-08")])]),t("ul",[t("li",[s._v("Corregido el problema de color del borde del Select cuando está el slot "),t("code",{pre:!0},[s._v("prepend")]),s._v(" o "),t("code",{pre:!0},[s._v("append")]),s._v("  del Input, #9089")]),t("li",[s._v("Corregido el parámetro  "),t("code",{pre:!0},[s._v("remove-tag")]),s._v(" de Select, #9090")]),t("li",[s._v("Añadido los atributos "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" y "),t("code",{pre:!0},[s._v("hide-timeout")]),s._v(" para SubMenu, #8934 (por @HugoLew)")]),t("li",[s._v("Corregido el estilo de Tooltip de  "),t("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v("  que faltaba cuando Table era importada bajo demanda, #9130")]),t("li",[s._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  "),t("code",{pre:!0},[s._v("clearSort")]),s._v("  era ejecutado en esa columna, #9100 (por @zEmily)")]),t("li",[s._v("El fichero de configuración i18n para el checo se renombra de "),t("code",{pre:!0},[s._v("cz")]),s._v(" a "),t("code",{pre:!0},[s._v("cs-CZ")]),s._v(", #9164")])]),t("h3",{attrs:{id:"2-0-10"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.10")]),t("p",[t("em",[s._v("2017-12-29")])]),t("ul",[t("li",[s._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),t("li",[s._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),t("li",[s._v("Ahora DatePicker sólo emite el evento "),t("code",{pre:!0},[s._v("change")]),s._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("tabindex")]),s._v(" para Input, #9041 (by @dicklwm)")])]),t("h3",{attrs:{id:"2-0-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.9🎄")]),t("p",[t("em",[s._v("2017-12-24")])]),t("ul",[t("li",[s._v("Añadida la función de enganche (hook) "),t("code",{pre:!0},[s._v("before-remove")]),s._v("  para Upload, #8788 (by @firesh)")]),t("li",[s._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),t("li",[s._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),t("code",{pre:!0},[s._v("element-loading-custom-class")]),s._v(", #8826 (por @earlymeme)")]),t("li",[s._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("renderAfterExpand")]),s._v(" para Tree, #8972")])]),t("h3",{attrs:{id:"2-0-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.8")]),t("p",[t("em",[s._v("2017-12-12")])]),t("ul",[t("li",[s._v("Agregada la documentacion en español")]),t("li",[s._v("Arreglado "),t("code",{pre:!0},[s._v("show-timeout")]),s._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),t("li",[s._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),t("li",[s._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),t("li",[t("code",{pre:!0},[s._v("format")]),s._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),t("h3",{attrs:{id:"2-0-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.7")]),t("p",[t("em",[s._v("2017-11-29")])]),t("ul",[t("li",[s._v("Solucionado el estilo disabled en el texto de button, #8570")])]),t("h3",{attrs:{id:"2-0-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.6")]),t("p",[t("em",[s._v("2017-11-29")])]),t("ul",[t("li",[s._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),t("li",[s._v("Corregido activacion para Popover cuando "),t("code",{pre:!0},[s._v("trigger")]),s._v(" es manual, #8467")]),t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v("  para Autocomplete, #8446 (por @liyanlong)")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("separator")]),s._v(" para Cascader, #8501")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("clearable")]),s._v(" para Input, #8509 (por @lbogdan)")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("background")]),s._v(" para Pagination, #8553")])]),t("h3",{attrs:{id:"2-0-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.5")]),t("p",[t("em",[s._v("2017-11-17")])]),t("ul",[t("li",[s._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),t("li",[s._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),t("li",[s._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("collapse-tags")]),s._v(" para multiple Select  para reemplazar las tags con una línea de texto, #8190")]),t("li",[s._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),t("li",[s._v("Ahora puede usar el método "),t("code",{pre:!0},[s._v("doLayout")]),s._v(" de Table para actualizar su diseño, #8351")])]),t("h3",{attrs:{id:"2-0-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.4")]),t("p",[t("em",[s._v("2017-11-10")])]),t("ul",[t("li",[s._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),t("li",[s._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),t("li",[s._v("Arreglado Tree's "),t("code",{pre:!0},[s._v("updateKeyChildren")]),s._v(" borraba incorrectamente los nodos hijos, #8100")]),t("li",[s._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),t("li",[s._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),t("h3",{attrs:{id:"2-0-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.3")]),t("p",[t("em",[s._v("2017-11-03")])]),t("ul",[t("li",[s._v("Solucionado atributos "),t("code",{pre:!0},[s._v("editable")]),s._v(" and "),t("code",{pre:!0},[s._v("readonly")]),s._v(" de DatePicker de los rangos, #7922")]),t("li",[s._v("Corregido error de estilo de los Tabs anidados, #7941")]),t("li",[s._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),t("li",[s._v("Corregido el tiempo de activación del evento "),t("code",{pre:!0},[s._v("current-change")]),s._v("  para Pagination, #7995")]),t("li",[s._v("Corregido Tooltip no registrado en el Menu, #7995")])]),t("h3",{attrs:{id:"2-0-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.2")]),t("p",[t("em",[s._v("2017-10-31")])]),t("ul",[t("li",[s._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),t("li",[s._v("El metodo "),t("code",{pre:!0},[s._v("validate")]),s._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),t("li",[s._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),t("li",[s._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),t("code",{pre:!0},[s._v("list-type")]),s._v(" es picture-card, #7857")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("sort-by")]),s._v(" para TableColumn, #7828 (por @wangfengming)")]),t("li",[s._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),t("li",[s._v("Corregido error de estilo de icono de Step vertical, #7891")]),t("li",[s._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),t("h3",{attrs:{id:"2-0-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.1")]),t("p",[t("em",[s._v("2017-10-28")])]),t("ul",[t("li",[s._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),t("li",[s._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),t("li",[s._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),t("h3",{attrs:{id:"2-0-0-carbon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0 Carbon")]),t("p",[t("em",[s._v("2017-10-27")])]),t("h4",{attrs:{id:"new-features-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),t("ul",[t("li",[s._v("General\n"),t("ul",[t("li",[s._v("Un nuevo tema:  "),t("code",{pre:!0},[s._v("theme-chalk")])]),t("li",[s._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),t("li",[s._v("Añadido tipografías TypeScript")]),t("li",[s._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),t("li",[s._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),t("li",[s._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),t("li",[s._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),t("code",{pre:!0},[s._v("size")]),s._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),t("li",[s._v("Button\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("round")]),s._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),t("li",[s._v("TimeSelect\n"),t("ul",[t("li",[s._v("Ahora puede ser navegado por  "),t("code",{pre:!0},[s._v("Up")]),s._v(" y "),t("code",{pre:!0},[s._v("Down")]),s._v(", y presionando "),t("code",{pre:!0},[s._v("Enter")]),s._v(" selecciona la hora #6023")])])]),t("li",[s._v("TimePicker\n"),t("ul",[t("li",[s._v("Ahora puede ser navegado por  "),t("code",{pre:!0},[s._v("Up")]),s._v(" y "),t("code",{pre:!0},[s._v("Down")]),s._v(", y presionando "),t("code",{pre:!0},[s._v("Enter")]),s._v(" selecciona la hora #6050")]),t("li",[s._v("Añadido "),t("code",{pre:!0},[s._v("start-placeholder")]),s._v(" y "),t("code",{pre:!0},[s._v("end-placeholder")]),s._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("arrow-control")]),s._v(" para hacer girar el tiempo con las flechas #7438")])])]),t("li",[s._v("Tree\n"),t("ul",[t("li",[s._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("check-descendants")]),s._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),t("code",{pre:!0},[s._v("lazy")]),s._v(" #6235")])])]),t("li",[s._v("Tag\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" añadido #7203")])])]),t("li",[s._v("Datepicker\n"),t("ul",[t("li",[s._v("Ahora "),t("code",{pre:!0},[s._v("timeFormat")]),s._v(" puede dar formato al TimePicker cuando type está configurado en "),t("code",{pre:!0},[s._v("datetimerange")]),s._v(" #6052")]),t("li",[s._v("Añadido "),t("code",{pre:!0},[s._v("start-placeholder")]),s._v(" y "),t("code",{pre:!0},[s._v("end-placeholder")]),s._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("value-format")]),s._v(" añadido para personalizar el formato del valor enlazado, #7367")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("unlink-panels")]),s._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),t("li",[s._v("MessageBox\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" #6043")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #7029")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("roundButton")]),s._v(" para mostrar Botones redondeados #7029")]),t("li",[s._v("Añadido atributo  "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6043")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("inputType")]),s._v(" para asignar el tipo para el input interno, #7651")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("width")]),s._v(", "),t("code",{pre:!0},[s._v("fullscreen")]),s._v(", "),t("code",{pre:!0},[s._v("append-to-body")]),s._v(". Ahora Dialog puede ser anidado")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #7042")]),t("li",[s._v("Añadidos  "),t("code",{pre:!0},[s._v("focus-after-closed")]),s._v(", "),t("code",{pre:!0},[s._v("focus-after-open")]),s._v("  para mejorar la accesibilidad #6511")])])]),t("li",[s._v("ColorPicker\n"),t("ul",[t("li",[s._v("Ahora puede escribir colores en el input #6167")]),t("li",[s._v("Añadidos atributos "),t("code",{pre:!0},[s._v("size")]),s._v(" y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" #7026")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("popper-class")]),s._v(" #7351")])])]),t("li",[s._v("Message\n"),t("ul",[t("li",[s._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),t("li",[s._v("Añadido atributo  "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6207")]),t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #6875")])])]),t("li",[s._v("Notification\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("position")]),s._v(" para configurar donde aparece Notification #6231")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),t("sup",[s._v("*")]),s._v(" #6231")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("showClose")]),s._v(" para ocultar el botón de cierre #6402")])])]),t("li",[s._v("Rate\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("show-score")]),s._v(" para determinar si la puntuación actual se muestra #6295")])])]),t("li",[s._v("Tabs\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("tab-position")]),s._v("  #6096")])])]),t("li",[s._v("Radio\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("border")]),s._v(" y "),t("code",{pre:!0},[s._v("size")]),s._v("  #6690")])])]),t("li",[s._v("Checkbox\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("border")]),s._v(" y "),t("code",{pre:!0},[s._v("size")]),s._v("  #6690")])])]),t("li",[s._v("Alert\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" agregado para que el contenido pueda ser centrado #6876")])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Añadidos los atributos  "),t("code",{pre:!0},[s._v("background-color")]),s._v(", "),t("code",{pre:!0},[s._v("text-color")]),s._v(" y "),t("code",{pre:!0},[s._v("active-text-color")]),s._v(" #7064")]),t("li",[s._v("Añadidos los methods  "),t("code",{pre:!0},[s._v("open")]),s._v(" and "),t("code",{pre:!0},[s._v("close")]),s._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),t("li",[s._v("Form\n"),t("ul",[t("li",[s._v("Añadido el atributo  "),t("code",{pre:!0},[s._v("inline-message")]),s._v("  para determinar si el mensaje de validación se muestra inline #7032")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("status-icon")]),s._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),t("li",[s._v("Form y FormItem ahora tienen un atributo "),t("code",{pre:!0},[s._v("size")]),s._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),t("li",[s._v("Método "),t("code",{pre:!0},[s._v("validate")]),s._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),t("li",[s._v("Añadido método "),t("code",{pre:!0},[s._v("clearValidate")]),s._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Añadido slots con nombres "),t("code",{pre:!0},[s._v("suffix")]),s._v(" y "),t("code",{pre:!0},[s._v("prefix")]),s._v(" y atributos "),t("code",{pre:!0},[s._v("suffixIcon")]),s._v(" y "),t("code",{pre:!0},[s._v("prefixIcon")]),s._v("  para añadir contenido dentro del input #7032")])])]),t("li",[s._v("Breadcrumb\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("separator-class")]),s._v(" para dar soporte a los iconos como separadores de items #7203")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("simple")]),s._v(" para activar Steps de estilo sencillo #7274")])])]),t("li",[s._v("Pagination\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("prev-text")]),s._v(" y "),t("code",{pre:!0},[s._v("next-text")]),s._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  "),t("code",{pre:!0},[s._v("spinner")]),s._v(" y "),t("code",{pre:!0},[s._v("background")]),s._v(" , #7390")])])]),t("li",[s._v("Autocomplete\n"),t("ul",[t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("debounce")]),s._v(", #7413")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("Añadidos los atributos "),t("code",{pre:!0},[s._v("limit")]),s._v(" and "),t("code",{pre:!0},[s._v("on-exceed")]),s._v(" para limitar la cantidad de archivos, #7405")])])]),t("li",[s._v("DateTimePicker\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" para activar "),t("code",{pre:!0},[s._v("arrow-control")]),s._v(" del TimePicker anidado, #7438")])])]),t("li",[s._v("Layout\n"),t("ul",[t("li",[s._v("Añadido un nuevo breakpoint "),t("code",{pre:!0},[s._v("xl")]),s._v(" para viewport más ancho que 1920px")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("span-method")]),s._v(" para combinar celdas")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("clearSort")]),s._v(" para borrar la clasificación programáticamente")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("clearFilter")]),s._v(" para limpiar el filtro de forma programática")]),t("li",[s._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),t("code",{pre:!0},[s._v(".expanded")]),s._v(" a su lista de clases, para que pueda personalizar su estilo.")]),t("li",[s._v("Atributo de "),t("code",{pre:!0},[s._v("size")]),s._v(" añadido")]),t("li",[s._v("Añadido el método "),t("code",{pre:!0},[s._v("toggleRowExpansion")]),s._v(" para expandir o contraer filas expandibles programáticamente.")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("cell-class-name")]),s._v(" para asignar el nombre de la clase para las celdas")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("cell-style")]),s._v(" para dar estilo a las celdas")]),t("li",[s._v("Añadido atributo "),t("code",{pre:!0},[s._v("header-row-class-name")]),s._v(" para asignar el nombre de clase para las filas de encabezado.")]),t("li",[s._v("Añadido un atributo "),t("code",{pre:!0},[s._v("header-row-style")]),s._v(" para el estilo de encabezado")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("header-cell-class-name")]),s._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("header-cell-style")]),s._v(" a las celdas de encabezado de estilo")]),t("li",[s._v("El atributo prop de TableColumn ahora acepta las notaciones  "),t("code",{pre:!0},[s._v("object[key]")])]),t("li",[s._v("Atributo de "),t("code",{pre:!0},[s._v("index")]),s._v(" añadido para TableColumn para personalizar índices de filas")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Añadido el atributo "),t("code",{pre:!0},[s._v("reserve-keyword")]),s._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),t("h4",{attrs:{id:"bug-fixes-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),t("ul",[t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Arreglado  "),t("code",{pre:!0},[s._v("v-model")]),s._v("  que devolvia el segundo día de la semana seleccionada en modo week #6038")]),t("li",[s._v("Arreglado el primer input comenzaba borrado con el type "),t("code",{pre:!0},[s._v("daterange")]),s._v("  #6021")])])]),t("li",[s._v("DateTimePicker\n"),t("ul",[t("li",[s._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),t("li",[s._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),t("li",[s._v("TimePicker\n"),t("ul",[t("li",[s._v("Arreglado "),t("code",{pre:!0},[s._v("v-model")]),s._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),t("li",[s._v("Select\n"),t("ul",[t("li",[s._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   "),t("code",{pre:!0},[s._v("display: none")])]),t("li",[s._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),t("code",{pre:!0},[s._v("display: flex")])]),t("li",[s._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre  "),t("code",{pre:!0},[s._v("append")]),s._v("   que  desaparecia cuando los datos eran recuperados dinámicamente.")]),t("li",[s._v("Arreglado el atributo "),t("code",{pre:!0},[s._v("expand-row-keys")]),s._v(" que no funcionan con el valor inicial")]),t("li",[s._v("Fallo del filtro corregido al actualizar los datos")]),t("li",[s._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),t("li",[s._v("Corregido un error de "),t("code",{pre:!0},[s._v("max-height")]),s._v(" dinámico")]),t("li",[s._v("Corregidos algunos errores de cálculo de estilo")])])])]),t("h4",{attrs:{id:"breaking-changes-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),t("ul",[t("li",[s._v("General\n"),t("ul",[t("li",[s._v("Eliminado "),t("code",{pre:!0},[s._v("theme-default")])]),t("li",[s._v("Compatible con Vue 2.5.2+ e IE 10+")]),t("li",[s._v("Evento "),t("code",{pre:!0},[s._v("change")]),s._v("  de componentes del formulario y evento "),t("code",{pre:!0},[s._v("current-change")]),s._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),t("li",[s._v("El atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),t("code",{pre:!0},[s._v("medium")]),s._v(", "),t("code",{pre:!0},[s._v("small")]),s._v(" y "),t("code",{pre:!0},[s._v("mini")]),s._v(".")]),t("li",[s._v("Para facilitar el uso de iconos de terceros, los atributos "),t("code",{pre:!0},[s._v("icon")]),s._v(" de Button y Steps y los atributos  "),t("code",{pre:!0},[s._v("prefix-icon")]),s._v(" y "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v("  del input ahora requieren un nombre de clase completo.")])])]),t("li",[s._v("Dialog\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con  "),t("code",{pre:!0},[s._v("width")]),s._v(" y "),t("code",{pre:!0},[s._v("fullscreen")])]),t("li",[s._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),t("code",{pre:!0},[s._v("v-model")])])])]),t("li",[s._v("Rate\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("text-template")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("score-template")])])])]),t("li",[s._v("Dropdown\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("menu-align")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("placement")]),s._v(". Ahora soporta más posiciones")])])]),t("li",[s._v("Transfer\n"),t("ul",[t("li",[t("code",{pre:!0},[s._v("footer-format")]),s._v(" a sido renombrado a "),t("code",{pre:!0},[s._v("format")])])])]),t("li",[s._v("Switch\n"),t("ul",[t("li",[s._v("Los atributos que comienzan con "),t("code",{pre:!0},[s._v("on*")]),s._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),t("code",{pre:!0},[s._v("on*")]),s._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),t("code",{pre:!0},[s._v("on*")]),s._v(" se renombran a "),t("code",{pre:!0},[s._v("active-*")]),s._v(", y por consiguiente los atributos "),t("code",{pre:!0},[s._v("off-*")]),s._v(" se renombran a "),t("code",{pre:!0},[s._v("inactivado-*")]),s._v(". Este cambio afecta a los siguientes atributos:  "),t("code",{pre:!0},[s._v("on-icon-class")]),s._v(", "),t("code",{pre:!0},[s._v("off-icon-class")]),s._v(", "),t("code",{pre:!0},[s._v("on-text")]),s._v(", "),t("code",{pre:!0},[s._v("off-text")]),s._v(", "),t("code",{pre:!0},[s._v("on-color")]),s._v(", "),t("code",{pre:!0},[s._v("off-color")]),s._v(", "),t("code",{pre:!0},[s._v("on-value")]),s._v(", "),t("code",{pre:!0},[s._v("off-value")]),s._v(".")]),t("li",[s._v("Los atributos "),t("code",{pre:!0},[s._v("active-text")]),s._v(" y "),t("code",{pre:!0},[s._v("inactive-text")]),s._v("  ahora no tienen valores por defecto.")])])]),t("li",[s._v("Tag\n"),t("ul",[t("li",[s._v("El atributo type acepta ahora  "),t("code",{pre:!0},[s._v("success")]),s._v(", "),t("code",{pre:!0},[s._v("info")]),s._v(", "),t("code",{pre:!0},[s._v("warning")]),s._v(" y "),t("code",{pre:!0},[s._v("danger")])])])]),t("li",[s._v("Menu\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("theme")]),s._v(" eliminado. El color de Menu se puede configurar utilizando  "),t("code",{pre:!0},[s._v("background-color")]),s._v(", "),t("code",{pre:!0},[s._v("text-color")]),s._v(" y "),t("code",{pre:!0},[s._v("active-text-color")])])])]),t("li",[s._v("Input\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("icon")]),s._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  "),t("code",{pre:!0},[s._v("suffix-icon")]),s._v("  o el slot con nombre "),t("code",{pre:!0},[s._v("suffix")]),s._v(".")]),t("li",[s._v("Eliminado el atributo "),t("code",{pre:!0},[s._v("on-icon-click")]),s._v(" y el evento "),t("code",{pre:!0},[s._v("click")]),s._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),t("li",[s._v("El evento "),t("code",{pre:!0},[s._v("change")]),s._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),t("code",{pre:!0},[s._v("input")]),s._v(".")])])]),t("li",[s._v("Autocomplete\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("custom-item")]),s._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),t("code",{pre:!0},[s._v("scoped slot")])]),t("li",[s._v("Atributo  "),t("code",{pre:!0},[s._v("props")]),s._v("  eliminado. Ahora puede utilizar el atributo "),t("code",{pre:!0},[s._v("value-key")]),s._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),t("li",[s._v("Steps\n"),t("ul",[t("li",[s._v("Atributo "),t("code",{pre:!0},[s._v("center")]),s._v(" eliminado")]),t("li",[s._v("Ahora Steps llenara su contenedor padre por defecto")])])]),t("li",[s._v("DatePicker\n"),t("ul",[t("li",[s._v("Los parámetros del evento "),t("code",{pre:!0},[s._v("change")]),s._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),t("code",{pre:!0},[s._v("value-format")])])])]),t("li",[s._v("Table\n"),t("ul",[t("li",[s._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),t("code",{pre:!0},[s._v("inline-template")])]),t("li",[t("code",{pre:!0},[s._v("sort-method")]),s._v(" ahora se alinea con "),t("code",{pre:!0},[s._v("Array.sort")]),s._v(". Debería devolver un número en lugar de un booleano")]),t("li",[s._v("El slot "),t("code",{pre:!0},[s._v("append")]),s._v("  se desplazo fuera del elemento "),t("code",{pre:!0},[s._v("tbody")]),s._v(" para evitar múltiples renderizados.")]),t("li",[s._v("Evento "),t("code",{pre:!0},[s._v("expand")]),s._v(" se renombro a "),t("code",{pre:!0},[s._v("expand-change")])]),t("li",[s._v("Los parametros de los métodos  "),t("code",{pre:!0},[s._v("row-class-name")]),s._v(" y "),t("code",{pre:!0},[s._v("row-style")]),s._v(" son ahora un objeto")])])])]),t("h1"),t("p",[t("i",[t("sup",[s._v("*")]),s._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("ataques XSS")]),s._v(". Por lo tanto, cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" está encendido, por favor asegúrese de que el contenido de "),t("code",{pre:!0},[s._v("message")]),s._v(" es confiable, y "),t("strong",[s._v("nunca")]),s._v(" asigne el "),t("code",{pre:!0},[s._v("message")]),s._v(" al contenido proporcionado por el usuario.")]),s._v("``")])])}],!1,null,null,null);r.options.__file="CHANGELOG.es.md";var l={components:{ChangeLog:r.exports},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,a=s.$el.children,t=a[1].querySelector("a");t&&t.remove();for(var e=a[1].textContent.trim(),r='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+e+'" target="_blank">'+e+"</a></h3>",l=a.length,n=2;n<l;n++){var p=a[n];(t=a[n].querySelector("a"))&&"header-anchor"===t.getAttribute("class")&&t.remove(),"H3"!==p.tagName?r+=a[n].outerHTML:r+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(e=a[n].textContent.trim())+'" target="_blank">'+e+"</a></h3>"}r=(r=r.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=r+"</li>",s.$el.remove()}},n=(t(399),Object(e.a)(l,function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Lista de cambios\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));n.options.__file="changelog.vue";a.default=n.exports},,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){this.$createElement;return{data:function(s){for(var a=[],t=1;t<=15;t++)a.push({key:t,label:"Option "+t,disabled:t%4==0});return a}(),data2:function(s){var a=[],t=["CA","IL","MD","TX","FL","CO","CT"];return["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(s,e){a.push({label:s,key:e,initial:t[e]})}),a}(),data3:function(s){for(var a=[],t=1;t<=15;t++)a.push({value:t,desc:"Option "+t,disabled:t%4==0});return a}(),value1:[1,4],value2:[],value3:[1],value4:[1],value5:[],filterMethod:function(s,a){return a.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,a){return s("span",[a.key," - ",a.label])}}},methods:{handleChange:function(s,a,t){console.log(s,a,t)}}},r=(t(539),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer v-model="value1" :data="data">\n  </el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value1: [1, 4]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})]],2),t("p",[s._v("Los datos se pasan a Transfer a través del atributo "),t("code",[s._v("data")]),s._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),t("code",[s._v("key")]),s._v(" que será el identificador del item, "),t("code",[s._v("label")]),s._v(" que será el texto a mostrar, y "),t("code",[s._v("disabled")]),s._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),t("code",[s._v("v-model")]),s._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),t("code",[s._v("v-model")]),s._v(" con un array.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n          });\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v("]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Puede buscar y filtrar los items.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer filterable :filter-method="filterMethod" filter-placeholder="State Abbreviations" v-model="value2" :data="data2">\n  </el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})]],2),t("p",[s._v("Ponga el atributo "),t("code",[s._v("filterable")]),s._v(" a true para permitir el filtrado.Por defecto si el "),t("code",[s._v("label")]),s._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),t("code",[s._v("filter-method")]),s._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterMethod"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filter-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"State Abbreviations"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData2 = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" states = ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Illinois'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Maryland'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Texas'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Colorado'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Connecticut '")]),s._v("];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" initials = ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'IL'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MD'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TX'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'FL'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CO'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CT'")]),s._v("];\n        states.forEach("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n          data.push({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": city,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": index,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("initial")]),s._v(": initials[index]\n          });\n        });\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": generateData2(),\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": [],\n        filterMethod(query, item) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n        }\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n  <div style="text-align: center">\n    <el-transfer style="text-align: left; display: inline-block" v-model="value3" filterable="" :left-default-checked="[2, 3]" :right-default-checked="[1]" :render-content="renderFunc" :titles="[\'Source\', \'Target\']" :button-texts="[\'To left\', \'To right\']" :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }" @change="handleChange" :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n  <div style="text-align: center">\n    <el-transfer style="text-align: left; display: inline-block" v-model="value4" filterable="" :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="[\'Source\', \'Target\']" :button-texts="[\'To left\', \'To right\']" :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }" @change="handleChange" :data="data">\n      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value3: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n",style:"\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[s._v("Customize data items using render-content")]),t("div",{staticStyle:{"text-align":"center"}},[t("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}},[t("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("Operation")]),t("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("Operation")])],1)],1),t("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[s._v("Customize data items using scoped slot")]),t("div",{staticStyle:{"text-align":"center"}},[t("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},scopedSlots:s._u([{key:"default",fn:function(a){var e=a.option;return t("span",{},[s._v(s._s(e.key)+" - "+s._s(e.label))])}}]),model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}},[t("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("Operation")]),t("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("Operation")])],1)],1)]],2),t("p",[s._v("Use "),t("code",[s._v("titles")]),s._v(", "),t("code",[s._v("button-texts")]),s._v(", "),t("code",[s._v("render-content")]),s._v(" y "),t("code",[s._v("format")]),s._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: "),t("code",[s._v("left-footer")]),s._v(" y "),t("code",[s._v("right-footer")]),s._v(". Además, si quiere algunos items marcados inicialmente puede usar "),t("code",[s._v("left-default-checked")]),s._v(" y "),t("code",[s._v("right-default-checked")]),s._v(". Finalmente este ejemplo muestra el evento "),t("code",[s._v("change")]),s._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),t("code",[s._v("render-content")]),s._v(" funcionará si las dependencias son configuradas correctamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center; margin: 0 0 20px"')]),s._v(">")]),s._v("Customize data items using render-content"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: left; display: inline-block"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"renderFunc"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['To left', 'To right']\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center; margin: 50px 0 20px"')]),s._v(">")]),s._v("Customize data items using scoped slot"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: left; display: inline-block"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['To left', 'To right']\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ option }"')]),s._v(">")]),s._v("{{ option.key }} - {{ option.label }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transfer-footer")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n          });\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n        renderFunc(h, option) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")])]),s._v(";\n        }\n      };\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(value, direction, movedKeys) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer v-model="value5" :props="{\n      key: \'value\',\n      label: \'desc\'\n    }" :data="data3">\n  </el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value5: []\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})]],2),t("p",[s._v("En este ejemplo los elementos no tienen "),t("code",[s._v("key")]),s._v("y "),t("code",[s._v("label")]),s._v(", en vez de eso tienen "),t("code",[s._v("value")]),s._v(" y "),t("code",[s._v("desc")]),s._v(". Así que tiene que añadir alias para "),t("code",[s._v("key")]),s._v(" y "),t("code",[s._v("label")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData3 = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": i,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`Option "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n          });\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": generateData3(),\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": []\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),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),s._m(15)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"filtrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"prop-con-alias"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop con alias")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Por defecto Transfer busca los atributos "),t("code",{pre:!0},[s._v("key")]),s._v(", "),t("code",{pre:!0},[s._v("label")]),s._v(", y "),t("code",{pre:!0},[s._v("disabled")]),s._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),t("code",{pre:!0},[s._v("props")]),s._v(" para añadir alias.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atriburo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("data")]),t("td",[s._v("Origen de datos")]),t("td",[s._v("array[{ key, label, disabled }]")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("Si se puede filtrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-placeholder")]),t("td",[s._v("Placeholder para el input del filtro")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Enter keyword")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("Método de filtrado")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("target-order")]),t("td",[s._v("estrategia de órdenes para elementos de la lista destino. Si está configurado en "),t("code",{pre:!0},[s._v("original")]),s._v(", los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para "),t("code",{pre:!0},[s._v("push")]),s._v(", los nuevos elementos añadidos se insertaran al final. Si se ajusta a "),t("code",{pre:!0},[s._v("unshift")]),s._v(", los nuevos elementos añadidos se insertarán en la parte superior.")]),t("td",[s._v("string")]),t("td",[s._v("original / push / unshift")]),t("td",[s._v("original")])]),t("tr",[t("td",[s._v("titles")]),t("td",[s._v("Títulos de las listas")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['List 1', 'List 2']")])]),t("tr",[t("td",[s._v("button-texts")]),t("td",[s._v("Texto de los botones")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("Función de renderizado")]),t("td",[s._v("function(h, option)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("Texto para el status en el header")]),t("td",[s._v("object{noChecked, hasChecked}")]),t("td",[s._v("—")]),t("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("prop alias para el origen de datos")]),t("td",[s._v("object{key, label, disabled}")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("left-default-checked")]),t("td",[s._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("right-default-checked")]),t("td",[s._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[this._v("left-footer")]),a("td",[this._v("Contenido del footer de la lista de la izquierda")])]),a("tr",[a("td",[this._v("right-footer")]),a("td",[this._v("Contenido del footer de la lista de la derecha")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Method")]),a("th",[this._v("Description")]),a("th",[this._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[this._v("clearQuery")]),a("td",[this._v("borra la palabra clave del filtro de un determinado panel")]),a("td",[this._v("'left' / 'right'")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),t("td",[s._v("array con las claves de los elementos de la lista de la derecha")])]),t("tr",[t("td",[s._v("left-check-change")]),t("td",[s._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda")]),t("td",[s._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])]),t("tr",[t("td",[s._v("right-check-change")]),t("td",[s._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha.")]),t("td",[s._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])])])])}],!1,null,null,null);l.options.__file="transfer.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{disabled:!1}}},r=(t(538),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Mostrar aviso de información con el hover del mouse.")]),s._m(1),t("p",[s._v("Tooltip tiene 9 colocaciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n\n',script:null,style:"\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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"box"},[t("div",{staticClass:"top"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[t("el-button",[s._v("top-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[t("el-button",[s._v("top")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[t("el-button",[s._v("top-end")])],1)],1),t("div",{staticClass:"left"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[t("el-button",[s._v("left-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[t("el-button",[s._v("left")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[t("el-button",[s._v("left-end")])],1)],1),t("div",{staticClass:"right"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[t("el-button",[s._v("right-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[t("el-button",[s._v("right")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[t("el-button",[s._v("right-end")])],1)],1),t("div",{staticClass:"bottom"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[t("el-button",[s._v("bottom-start")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[t("el-button",[s._v("bottom")])],1),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[t("el-button",[s._v("bottom-end")])],1)],1)])]),t("p",[s._v("Use el atributo "),t("code",[s._v("content")]),s._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),t("code",[s._v("placement")]),s._v(" determina la posición del tooltip. Su valor es "),t("code",[s._v("[orientation]-[alignment]")]),s._v(" con cuatro orientaciones "),t("code",[s._v("top")]),s._v(", "),t("code",[s._v("left")]),s._v(", "),t("code",[s._v("right")]),s._v(", "),t("code",[s._v("bottom")]),s._v(" y tres alineaciones "),t("code",[s._v("start")]),s._v(", "),t("code",[s._v("end")]),s._v(", "),t("code",[s._v("null")]),s._v(", la alineación default es null. Tome "),t("code",[s._v('placement="left-end"')]),s._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Left prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-start"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Center prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Right prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-end"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Top prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-start"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Center prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Bottom prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-end"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Top prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-start"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Center prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Bottom prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-end"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Left prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Center prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Right prompts info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[s._v("Dark")])],1),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[s._v("Light")])],1)],1),t("p",[s._v("Establecer "),t("code",[s._v("effect")]),s._v(" para modificar el tema, el valor por defecto es "),t("code",[s._v("dark")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top center"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Dark"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom center"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Light"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Despliegue múltiples líneas de texto y establezca su formato.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n  <div slot="content">multiple lines<br>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[s._v("multiple lines"),t("br"),s._v("second line")]),t("el-button",[s._v("Top center")])],1)],1),t("p",[s._v("Sobre-escribiba el atributo "),t("code",[s._v("content")]),s._v(" del "),t("code",[s._v("el-tooltip")]),s._v(" añadiendo un slot llamado "),t("code",[s._v("content")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("second line"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Top center"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),s._m(6),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n\n',script:null,style:"\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[t("el-button",{on:{click:function(a){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click to close tooltip function"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to {{disabled ? 'active' : 'close'}} tooltip function"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter-active")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" ease;\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-leave-active")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".expand-fade-leave-active")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tema")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Tooltip tiene dos temas: "),a("code",{pre:!0},[this._v("dark")]),this._v(" and "),a("code",{pre:!0},[this._v("light")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"mas-contenido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más Contenido")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-avanzado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Avanzado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("el atributo "),a("code",{pre:!0},[this._v("transition")]),this._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),a("code",{pre:!0},[this._v("el-fade-in-linear")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("el atributo "),a("code",{pre:!0},[this._v("disabled")]),this._v(" permite deshabilitar "),a("code",{pre:!0},[this._v("tooltip")]),this._v(". Solo es necesario definirlo como "),a("code",{pre:!0},[this._v("true")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("De hecho, Tooltip es una extension basada en "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("El componente "),t("code",{pre:!0},[s._v("router-link")]),s._v(" no es soportado por Tooltip, favor de usar "),t("code",{pre:!0},[s._v("vm.$router.push")]),s._v(".")]),t("p",[s._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("effect")]),t("td",[s._v("tema del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("dark/light")]),t("td",[s._v("dark")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("contenido a mostrar, puede ser sobre-escrito por "),t("code",{pre:!0},[s._v("slot#content")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("posición del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("visibilidad del Tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("saber si el Tooltip se encuentra deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("offset del Tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("nombre de animación")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("si una flecha es mostrada. Para mayor información, revisar la página de "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[s._v("parámetros de "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[s._v("Object")]),t("td",[s._v("referirse a la documentación de "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("retraso de la apariencia, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("manual")]),t("td",[s._v("si el Tooltipo será controlado de forma manual. "),t("code",{pre:!0},[s._v("mouseenter")]),s._v(" y "),t("code",{pre:!0},[s._v("mouseleave")]),s._v(" no tendrán efecto si fue establecido como "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el popper del Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("enterable")]),t("td",[s._v("si el mouse puede entrar al Tooltip")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("hide-after")]),t("td",[s._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])}],!1,null,null,null);l.options.__file="tooltip.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}},r=(t(523),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Se muestra la animación mientras se cargan los datos.")]),s._m(1),t("p",[s._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n\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        loading: true\n      };\n    }\n  };\n",style:"\n  body {\n    margin: 0;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),t("code",[s._v("v-loading")]),s._v(", solo necesitas enlazarlo a un valor "),t("code",[s._v("Boolean")]),s._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),t("code",[s._v("body")]),s._v(", la máscara se agrega al elemento body.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading2" element-loading-text="Loading..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Agrege el atributo "),t("code",[s._v("element-loading-text")]),s._v(" al elemento en el que "),t("code",[s._v("v-loading")]),s._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),t("code",[s._v("element-loading-spinner")]),s._v(" y "),t("code",[s._v("element-loading-background")]),s._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Loading..."')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-spinner")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-loading"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-background")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rgba(0, 0, 0, 0.8)"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n    Como directiva\n  </el-button>\n  <el-button type="primary" @click="openFullScreen2">\n    Como servicio\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: 'Loading',\n          spinner: 'el-icon-loading',\n          background: 'rgba(0, 0, 0, 0.7)'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n    Como directiva\n  ")]),t("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n    Como servicio\n  ")])]],2),t("p",[s._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),t("code",[s._v("fullscreen")]),s._v(", y este puede ser agregado al "),t("code",[s._v("body")]),s._v(". En este caso, si desea deshabilitar el desplazamiento en "),t("code",[s._v("body")]),s._v(", puede agregar otro modificador "),t("code",[s._v("lock")]),s._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    Como directiva\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openFullScreen2"')]),s._v(">")]),s._v("\n    Como servicio\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n      },\n      openFullScreen2() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" loading = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$loading({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lock")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("spinner")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'el-icon-loading'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(0, 0, 0, 0.7)'")]),s._v("\n        });\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          loading.close();\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede invocar el componente con un servicio. Importe el servicio:")]),s._m(5),t("p",[s._v("Invocar:")]),s._m(6),s._m(7),s._m(8),t("p",[s._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"cargando"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando dentro de un contenedor")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando a pantalla completa")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"servicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Servicio")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Loading } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[this._v("Loading.service(options);\n")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("El parámetro "),a("code",{pre:!0},[this._v("options")]),this._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),a("code",{pre:!0},[this._v("LoadingService")]),this._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),a("code",{pre:!0},[this._v("close")]),this._v(":")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("let")]),this._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Llamar al método "),a("code",{pre:!0},[this._v("close")]),this._v(" en cualquiera de estas puede cerrarlo.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Si Element es importado completamente, un método global "),a("code",{pre:!0},[this._v("$loading")]),this._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),a("code",{pre:!0},[this._v("this.$loading(options)")]),this._v(", y también devuelve una instancia del componente.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("target")]),t("td",[s._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),t("code",{pre:!0},[s._v("document.querySelector")]),s._v(" para obtener el correspondiente nodo del DOM")]),t("td",[s._v("object/string")]),t("td",[s._v("—")]),t("td",[s._v("document.body")])]),t("tr",[t("td",[s._v("body")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("body")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("fullscreen")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("fullscreen")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("lock")]),t("td",[s._v("igual que el modificador "),t("code",{pre:!0},[s._v("lock")]),s._v(" de "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text")]),t("td",[s._v("texto de cargando que se muestra debajo del spinner")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("spinner")]),t("td",[s._v("nombre de clase del spinner personalizado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("background")]),t("td",[s._v("color de fondo de la máscara")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizada para el componente")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="loading.md";a.default=l.exports},,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{links:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",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,a){var t=this.links;a(s?t.filter(this.createStateFilter(s)):t)},querySearchAsync:function(s,a){var t=this.links,e=s?t.filter(this.createStateFilter(s)):t;clearTimeout(this.timeout),this.timeout=setTimeout(function(){a(e)},3e3*Math.random())},createStateFilter:function(s){return function(a){return 0===a.value.toLowerCase().indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}},r=(t(521),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Ingresa datos usando el ratón o teclado.")]),s._m(1),t("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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(a){s.input=a},expression:"input"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(a){s.input1=a},expression:"input1"}})],1),t("p",[s._v("Deshabilite el Input con el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input1"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Añada un icono para indicar el tipo de Input.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-suffix">\n  <span class="demo-input-label">Using attributes</span>\n  <el-input placeholder="Pick a date" suffix-icon="el-icon-date" v-model="input2">\n  </el-input>\n  <el-input placeholder="Type something" prefix-icon="el-icon-search" v-model="input21">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Using slots</span>\n  <el-input placeholder="Pick a date" v-model="input22">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input placeholder="Type something" v-model="input23">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input2: '',\n      input21: '',\n      input22: '',\n      input23: ''\n    }\n  }\n}\n",style:"\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"demo-input-suffix"},[t("span",{staticClass:"demo-input-label"},[s._v("Using attributes")]),t("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(a){s.input2=a},expression:"input2"}}),t("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(a){s.input21=a},expression:"input21"}})],1),t("div",{staticClass:"demo-input-suffix"},[t("span",{staticClass:"demo-input-label"},[s._v("Using slots")]),t("el-input",{attrs:{placeholder:"Pick a date"},model:{value:s.input22,callback:function(a){s.input22=a},expression:"input22"}},[t("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t("el-input",{attrs:{placeholder:"Type something"},model:{value:s.input23,callback:function(a){s.input23=a},expression:"input23"}},[t("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),t("p",[s._v("Para añadir iconos en el Input, puede utilizar los atributos "),t("code",[s._v("prefix-icon")]),s._v(" y "),t("code",[s._v("suffix-icon")]),s._v(" . Además, los slots con nombre "),t("code",[s._v("prefix")]),s._v(" y "),t("code",[s._v("suffix")]),s._v(" también funcionan.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using attributes"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input2"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prefix-icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input21"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using slots"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input22"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input23"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prefix"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".demo-input-label")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("130px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input21")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input22")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input23")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="Please input" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(a){s.textarea=a},expression:"textarea"}})],1),t("p",[s._v("Controle la altura ajustando el prop "),t("code",[s._v("rows")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rows")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="Please input" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(a){s.textarea2=a},expression:"textarea2"}}),t("div",{staticStyle:{margin:"20px 0"}}),t("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(a){s.textarea3=a},expression:"textarea3"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autosize")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":autosize")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n  <el-input placeholder="Please input" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Select">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Order No." value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input3: '',\n      input4: '',\n      input5: '',\n      select: ''\n    }\n  }\n}\n",style:"\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(a){s.input3=a},expression:"input3"}},[t("template",{slot:"prepend"},[s._v("Http://")])],2)],1),t("div",{staticStyle:{"margin-top":"15px"}},[t("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(a){s.input4=a},expression:"input4"}},[t("template",{slot:"append"},[s._v(".com")])],2)],1),t("div",{staticStyle:{"margin-top":"15px"}},[t("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(a){s.input5=a},expression:"input5"}},[t("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(a){s.select=a},expression:"select"}},[t("el-option",{attrs:{label:"Restaurant",value:"1"}}),t("el-option",{attrs:{label:"Order No.",value:"2"}}),t("el-option",{attrs:{label:"Tel",value:"3"}})],1),t("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),t("p",[s._v("Utilice el "),t("code",[s._v("slot")]),s._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(">")]),s._v(".com"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input-with-select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"select"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Restaurant"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Order No."')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Tel"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-input")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("110px")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".input-with-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-input-group__prepend")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n  <el-input placeholder="Please Input" v-model="input6">\n  </el-input>\n  <el-input size="medium" placeholder="Please Input" v-model="input7">\n  </el-input>\n  <el-input size="small" placeholder="Please Input" v-model="input8">\n  </el-input>\n  <el-input size="mini" placeholder="Please Input" v-model="input9">\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"demo-input-size"},[t("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input6,callback:function(a){s.input6=a},expression:"input6"}}),t("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:s.input7,callback:function(a){s.input7=a},expression:"input7"}}),t("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(a){s.input8=a},expression:"input8"}}),t("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(a){s.input9=a},expression:"input9"}})],1)]),t("p",[s._v("Añada el atributo "),t("code",[s._v("size")]),s._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),t("code",[s._v("large")]),s._v(", "),t("code",[s._v("small")]),s._v(" y "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input9")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect"></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="Please Input" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n  </el-col>\n</el-row>\n\n',script:'\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"demo-autocomplete"},[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),t("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(a){s.state1=a},expression:"state1"}})],1),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),t("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(a){s.state2=a},expression:"state2"}})],1)],1)],1),t("p",[s._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),t("code",[s._v("fetch-suggestions")]),s._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),t("code",[s._v("querySearch(queryString, cb)")]),s._v(" devuelve las sugerencias al componente mediante "),t("code",[s._v("cb(data)")]),s._v(" cuando están listas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n    >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":trigger-on-focus")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n    >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestions")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("Personalice cómo se muestran las sugerencias.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" placeholder="Please input" @select="handleSelect">\n  <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n\n\n\n',script:'\n  export default {\n    data() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n',style:"\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"Please input"},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(a){var e=a.item;return[t("div",{staticClass:"value"},[s._v(s._s(e.value))]),t("span",{staticClass:"link"},[s._v(s._s(e.link))])]}}]),model:{value:s.state3,callback:function(a){s.state3=a},expression:"state3"}},[t("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:s.handleIconClick},slot:"suffix"})])],1),t("p",[s._v("Utilice "),t("code",[s._v("scoped slot")]),s._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),t("code",[s._v("item")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("popper-class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"my-autocomplete"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state3"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit el-input__icon"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ item }"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(">")]),s._v("{{ item.value }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(">")]),s._v("{{ item.link }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}},[s._v("\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestion objects")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),t("p",[s._v("Búsqueda de datos desde el servidor.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>\n\n',script:'\n  export default {\n    data() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(a){s.state4=a},expression:"state4"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state4"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearchAsync"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("timeout")]),s._v(":  "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n        clearTimeout("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout);\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout = setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random());\n      },\n      createFilter(queryString) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29),s._m(30)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"input-con-icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input con icono")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),a("code",{pre:!0},[this._v('type="textarea"')]),this._v(" para cambiar el "),a("code",{pre:!0},[this._v("input")]),this._v(" al tipo nativo "),a("code",{pre:!0},[this._v("textarea")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"textarea-tamano-automatico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea tamaño automatico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("El ajuste del prop "),a("code",{pre:!0},[this._v("autosize")]),this._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"mezclando-elementos-con-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mezclando elementos con input")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamano"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocompletado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocompletado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"template-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personalizado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"busqueda-remota"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"input-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de input")]),t("td",[s._v("string")]),t("td",[s._v("text, textarea y otros "),t("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types"}},[s._v("tipos de entrada nativos")])]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("maxlength")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("maxlength")]),s._v(" en el input nativo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("minlength")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("minlength")]),s._v(" en el input nativo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder del Input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input, esto no funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" no es textarea")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("clase del icono de prefijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("suffix-icon")]),t("td",[s._v("clase del icono de sufijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rows")]),t("td",[s._v("número de filas, sólo funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" es 'textarea'.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("autosize")]),t("td",[s._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),t("code",{pre:!0},[s._v("type")]),s._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),t("td",[s._v("boolean / object")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("autocomplete")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("autocomplete")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("on/off")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("auto-complete")]),t("td",[s._v("@DEPRECATED en el proximo cambio mayor de version")]),t("td",[s._v("string")]),t("td",[s._v("on/off")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("readonly")]),s._v(" en el input nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("max")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("min")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("step")]),s._v(" en el input nativo")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("resize")]),t("td",[s._v("control para el dimensionamiento")]),t("td",[s._v("string")]),t("td",[s._v("none, both, horizontal, vertical")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("autofocus")]),s._v(" en el input nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("form")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("form")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("tabindex")]),t("td",[s._v("orden de tabulacion para el Input")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"input-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("prefix")]),t("td",[s._v("contenido como prefijo del input")])]),t("tr",[t("td",[s._v("suffix")]),t("td",[s._v("contenido como sufijo del input")])]),t("tr",[t("td",[s._v("prepend")]),t("td",[s._v("contenido antes del input")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("contenido a añadir después del input")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"input-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("blur")]),t("td",[s._v("Se dispara cuando se pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Se dispara cuando se obtiene el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("change")]),t("td",[s._v("se activa cuando cambia el valor de entrada")]),t("td",[s._v("(value: string | number)")])]),t("tr",[t("td",[s._v("clear")]),t("td",[s._v('se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable".')]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"input-metodo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Metodo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("coloca el foco en el elemento")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("quita el foco del elemento")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("select")]),t("td",[s._v("selecciona el texto del input")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocomplete-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Opciones")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("el placeholder del Autocomplete")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Autocompete esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("nombre del campo del objeto de sugerencia del input para la visualización")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("nombre del icono")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("ubicación del menú emergente")]),t("td",[s._v("string")]),t("td",[s._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),t("td",[s._v("bottom-start")])]),t("tr",[t("td",[s._v("fetch-suggestions")]),t("td",[s._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),t("code",{pre:!0},[s._v("callback(data:[])")]),s._v(" para devolverlas a Autocomplete")]),t("td",[s._v("Function(queryString, callback)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre personalizado de clase para el dropdown de autocomplete")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("trigger-on-focus")]),t("td",[s._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("select-when-unmatched")]),t("td",[s._v("si se emite un evento "),t("code",{pre:!0},[s._v("select")]),s._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("prefix icon class")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("suffix-icon")]),t("td",[s._v("suffix icon class")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("hide-loading")]),t("td",[s._v("si se debe ocultar el icono de loading en la búsqueda remota")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-append-to-body")]),t("td",[s._v("si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("validate-event")]),t("td",[s._v("si se debe lanzar la validación de formulario")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocomplete-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("prefix")]),t("td",[s._v("contenido como prefijo del input")])]),t("tr",[t("td",[s._v("suffix")]),t("td",[s._v("contenido como sufijo del input")])]),t("tr",[t("td",[s._v("prepend")]),t("td",[s._v("contenido antes del input")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("contenido a añadir después del input")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocomplete-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("Contenido personalizado para el input de sugerencias. El parametro del scope es { item }")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocomplete-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Eventos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("select")]),a("td",[this._v("se dispara cuando se hace click a una sugerencia")]),a("td",[this._v("sugerencia en la que se está haciendo click")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"autocomplete-metodo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Metodo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("focus")]),a("td",[this._v("coloca el foco en el elemento")]),a("td",[this._v("—")])])])])}],!1,null,null,null);l.options.__file="input.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1,num7:1,num8:1,num9:1}},methods:{handleChange:function(s){console.log(s)}}},r=(t(520),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Input de  valores numéricos con un rango personalizable.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(a){s.num1=a},expression:"num1"}})]],2),t("p",[s._v("Vincule una variable con "),t("code",[s._v("v-model")]),s._v(" en el elemento <el-input-number> y estará listo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value)\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(a){s.num2=a},expression:"num2"}})]],2),t("p",[s._v("El atributo "),t("code",[s._v("disabled")]),s._v(" acepta un valor "),t("code",[s._v("boolean")]),s._v(", y si el valor es "),t("code",[s._v("true")]),s._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),t("code",[s._v("min")]),s._v(" para establecer el valor mínimo y un valor "),t("code",[s._v("max")]),s._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),t("code",[s._v("0")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Le permite definir el nivel de incremento de los saltos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(a){s.num3=a},expression:"num3"}})]],2),t("p",[s._v("Añada el atributo "),t("code",[s._v("step")]),s._v(" para establecer el salto.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num9: 1\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:s.num9,callback:function(a){s.num9=a},expression:"num9"}})]],2),t("p",[s._v("Add "),t("code",[s._v("precision")]),s._v(" attribute to set the precision of input value.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num9"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":precision")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0.1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num9")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num4"></el-input-number>\n    <el-input-number size="medium" v-model="num5"></el-input-number>\n    <el-input-number size="small" v-model="num6"></el-input-number>\n    <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1,\n        num7: 1\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{model:{value:s.num4,callback:function(a){s.num4=a},expression:"num4"}}),t("el-input-number",{attrs:{size:"medium"},model:{value:s.num5,callback:function(a){s.num5=a},expression:"num5"}}),t("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(a){s.num6=a},expression:"num6"}}),t("el-input-number",{attrs:{size:"mini"},model:{value:s.num7,callback:function(a){s.num7=a},expression:"num7"}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num5"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num7"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num8: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(a){s.num8=a},expression:"num8"}})]],2),t("p",[s._v("Establezca "),t("code",[s._v("controls-position")]),s._v(" para decidir la posición de los botones de control.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("controls-position")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"precision"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("The value of "),a("code",{pre:!0},[this._v("precision")]),this._v(" must be a non negative integer and should not be less than the decimal places of "),a("code",{pre:!0},[this._v("step")]),this._v(".")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamano"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Utilice el atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",{pre:!0},[s._v("medium")]),s._v(", "),t("code",{pre:!0},[s._v("small")]),s._v(" o "),t("code",{pre:!0},[s._v("mini")]),s._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"posicion-de-los-controles"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de los controles")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor vinculado")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("el valor mínimo permitido")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[t("code",{pre:!0},[s._v("-Infinity")])])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("el valor maximo permitido")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[t("code",{pre:!0},[s._v("Infinity")])])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("incremento (salto)")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("precision")]),t("td",[s._v("precisión del valor del input")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del componente")]),t("td",[s._v("string")]),t("td",[s._v("large/small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el componente esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("controls")]),t("td",[s._v("si se activan los botones de control")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("controls-position")]),t("td",[s._v("posición de los botones de control")]),t("td",[s._v("string")]),t("td",[s._v("right")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("lo mismo que "),t("code",{pre:!0},[s._v("name")]),s._v(" en un input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("texto de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder in input")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se produce cuando el valor cambia")]),t("td",[s._v("value after change")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se produce cuando el componente pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se produce cuando el componente obtiene el foco")]),t("td",[s._v("(event: Event)")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetro")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("coloca el foco en el elemento actual")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("select")]),t("td",[s._v("selecciona el contenido del input")]),t("td",[s._v("-")])])])])}],!1,null,null,null);l.options.__file="input-number.md";a.default=l.exports},,,function(s,a,t){"use strict";t.r(a);var e=t(248),r={data:function(){return{icons:e}}},l=(t(519),t(0)),n=Object(l.a)(r,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Element proporciona un conjunto de iconos propios.")]),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("i",{staticClass:"el-icon-edit"}),t("i",{staticClass:"el-icon-share"}),t("i",{staticClass:"el-icon-delete"}),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),t("ul",{staticClass:"icon-list"},s._l(s.icons,function(a){return t("li",{key:a},[t("span",[t("i",{class:"el-icon-"+a}),t("span",{staticClass:"icon-name"},[s._v(s._s("el-icon-"+a))])])])}),0)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Simplemente asigna el nombre de la clase a "),a("code",{pre:!0},[this._v("el-icon-iconName")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Iconos")])}],!1,null,null,null);n.options.__file="icon.md";a.default=n.exports},,,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,a){console.log(s,a)},handleClose:function(s,a){console.log(s,a)},handleSelect:function(s,a){console.log(s,a)}}},r=(t(524),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Menú que provee la navegación para tu sitio.")]),s._m(1),t("p",[s._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">\n  <el-menu-item index="1">Processing Center</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Workspace</template>\n    <el-menu-item index="2-1">item one</el-menu-item>\n    <el-menu-item index="2-2">item two</el-menu-item>\n    <el-menu-item index="2-3">item three</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item four</template>\n      <el-menu-item index="2-4-1">item one</el-menu-item>\n      <el-menu-item index="2-4-2">item two</el-menu-item>\n      <el-menu-item index="2-4-3">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},[s._v("Workspace")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),t("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),t("el-menu-item",{attrs:{index:"4"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),t("div",{staticClass:"line"}),t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},[s._v("Workspace")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")]),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("item two")]),t("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("item three")])],2)],2),t("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("Info")]),t("el-menu-item",{attrs:{index:"4"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),t("p",[s._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),t("code",[s._v("mode")]),s._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),t("code",[s._v("background-color")]),s._v(", "),t("code",[s._v("text-color")]),s._v(" y "),t("code",[s._v("active-text-color")]),s._v(" para customizar los colores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeIndex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeIndex2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("item two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeIndex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeIndex2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("NavMenu vertical con sub-menús.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n  <el-col :span="12">\n    <h5>Default colors</h5>\n    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Custom colors</h5>\n    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title="Group One">\n          <el-menu-item index="1-1">item one</el-menu-item>\n          <el-menu-item index="1-2">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Two">\n          <el-menu-item index="1-3">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item four</template>\n          <el-menu-item index="1-4-1">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n\n',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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"tac"},[t("el-col",{attrs:{span:12}},[t("h5",[s._v("Default colors")]),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",[s._v("Navigator One")])]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",[s._v("Navigator Four")])])],1)],1),t("el-col",{attrs:{span:12}},[t("h5",[s._v("Custom colors")]),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",[s._v("Navigator One")])]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",[s._v("Navigator Four")])])],1)],1)],1)],1),t("p",[s._v("Puede utilizar el componente "),t("code",[s._v("el-menu-item-group")]),s._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),t("code",[s._v("title")]),s._v(" o la propiedad "),t("code",[s._v("slot")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Default colors"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Custom colors"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("NavMenu vertical puede ser colapsado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">expand</el-radio-button>\n  <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group One</span>\n      <el-menu-item index="1-1">item one</el-menu-item>\n      <el-menu-item index="1-2">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Two">\n      <el-menu-item index="1-3">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item four</span>\n      <el-menu-item index="1-4-1">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\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:"\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(a){s.isCollapse=a},expression:"isCollapse"}},[t("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),t("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-location"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator One")])]),t("el-menu-item-group",[t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Group One")]),t("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("span",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),t("el-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Two")])]),t("el-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Three")])]),t("el-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),t("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Four")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("expand"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("collapse"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":collapse")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-menu-vertical-demo")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isCollapse")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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),s._m(15),s._m(16),s._m(17)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("mode")]),t("td",[s._v("modo de presentación del menú")]),t("td",[s._v("string")]),t("td",[s._v("horizontal / vertical")]),t("td",[s._v("vertical")])]),t("tr",[t("td",[s._v("collapse")]),t("td",[s._v("si el menú está colapsado (solo en modo vertical)")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("background-color")]),t("td",[s._v("color de fondo del menú (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de texto del menú (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#303133")])]),t("tr",[t("td",[s._v("active-text-color")]),t("td",[s._v("color de text del menu-item activo (formato hexadecimal)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])]),t("tr",[t("td",[s._v("default-active")]),t("td",[s._v("índice del menu-item activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-openeds")]),t("td",[s._v("arreglo que contiene las llaves del sub-menus activo")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unique-opened")]),t("td",[s._v("si solo un submenu puede ser activo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("menu-trigger")]),t("td",[s._v("como dispara eventos sub-menus, solo funciona cuando "),t("code",{pre:!0},[s._v("mode")]),s._v(" es 'horizontal'")]),t("td",[s._v("string")]),t("td",[s._v("hover / click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("router")]),t("td",[s._v("si el modo "),t("code",{pre:!0},[s._v("vue-router")]),s._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("collapse-transition")]),t("td",[s._v("si se debe permitir collapse transition")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Métodos de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("open")]),t("td",[s._v("abre un sub-menu específico")]),t("td",[s._v("index: índice del sub-menu para abrir")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("cierra un sub-menu específico")]),t("td",[s._v("index: índice del sub-menu para cerrar")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("callback ejecutado cuando el menú es activado")]),t("td",[s._v("index: índice del menú activado, indexPath: index path del menú activado")])]),t("tr",[t("td",[s._v("open")]),t("td",[s._v("callback ejecutado cuando sub-menu se expande")]),t("td",[s._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("callback ejecutado cuando sub-menu colapsa")]),t("td",[s._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-menu-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu-Item")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre de evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[this._v("click")]),a("td",[this._v("callback ejecutado cuando se hace click sobre menu-item")]),a("td",[this._v("el: instancia de menu-item")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-submenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos SubMenu")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("identificador único")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre personalizado de la clase del menu popup")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-timeout")]),t("td",[s._v("tiempo de espera antes de mostrar un submenú")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("hide-timeout")]),t("td",[s._v("tiempo de espera antes de ocultar un submenú")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta "),t("code",{pre:!0},[s._v("disabled")]),s._v(" el sub-menu")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-append-to-body")]),t("td",[s._v("si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("level one Submenu: true / other Submenus: false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-menu-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("identificador único")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("route")]),t("td",[s._v("Objeto Vue Router")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si esta "),t("code",{pre:!0},[s._v("disabled")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-menu-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del grupo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="menu.md";a.default=l.exports},,,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){var s=this;return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:function(a,t,e){""===t?e(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),e())},trigger:"blur"}],checkPass:[{validator:function(a,t,e){""===t?e(new Error("Please input the password again")):t!==s.ruleForm2.pass?e(new Error("Two inputs don't match!")):e()},trigger:"blur"}],age:[{validator:function(s,a,t){if(!a)return t(new Error("Please input the age"));setTimeout(function(){Number.isInteger(a)?a<18?t(new Error("Age must be greater than 18")):t():t(new Error("Please input digits"))},1e3)},trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var a=this.dynamicValidateForm.domains.indexOf(s);-1!==a&&this.dynamicValidateForm.domains.splice(a,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},r=(t(518),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{model:{value:s.form.name,callback:function(a){s.$set(s.form,"name",a)},expression:"form.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(a){s.$set(s.form,"region",a)},expression:"form.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(a){s.$set(s.form,"date1",a)},expression:"form.date1"}})],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(a){s.$set(s.form,"date2",a)},expression:"form.date2"}})],1)],1),t("el-form-item",{attrs:{label:"Instant delivery"}},[t("el-switch",{model:{value:s.form.delivery,callback:function(a){s.$set(s.form,"delivery",a)},expression:"form.delivery"}})],1),t("el-form-item",{attrs:{label:"Activity type"}},[t("el-checkbox-group",{model:{value:s.form.type,callback:function(a){s.$set(s.form,"type",a)},expression:"form.type"}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources"}},[t("el-radio-group",{model:{value:s.form.resource,callback:function(a){s.$set(s.form,"resource",a)},expression:"form.resource"}},[t("el-radio",{attrs:{label:"Sponsor"}}),t("el-radio",{attrs:{label:"Venue"}})],1)],1),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(a){s.$set(s.form,"desc",a)},expression:"form.desc"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),t("el-button",[s._v("Cancel")])],1)],1)],1),t("p",[s._v("En cada componente "),t("code",[s._v("form")]),s._v(", necesita un campo "),t("code",[s._v("form-item")]),s._v(" para que sea el contenedor del item.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.delivery"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.desc"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("p",[s._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[t("el-form-item",{attrs:{label:"Approved by"}},[t("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(a){s.$set(s.formInline,"user",a)},expression:"formInline.user"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(a){s.$set(s.formInline,"region",a)},expression:"formInline.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),t("p",[s._v("Establezca el atributo "),t("code",[s._v("inline")]),s._v(" como "),t("code",[s._v("true")]),s._v(" y el formulario sera inline.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":inline")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline.user"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline.region"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formInline")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("user")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">Left</el-radio-button>\n  <el-radio-button label="right">Right</el-radio-button>\n  <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n  <el-form-item label="Name">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(a){s.labelPosition=a},expression:"labelPosition"}},[t("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),t("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),t("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),t("div",{staticStyle:{margin:"20px"}}),t("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[t("el-form-item",{attrs:{label:"Name"}},[t("el-input",{model:{value:s.formLabelAlign.name,callback:function(a){s.$set(s.formLabelAlign,"name",a)},expression:"formLabelAlign.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-input",{model:{value:s.formLabelAlign.region,callback:function(a){s.$set(s.formLabelAlign,"region",a)},expression:"formLabelAlign.region"}})],1),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{model:{value:s.formLabelAlign.type,callback:function(a){s.$set(s.formLabelAlign,"type",a)},expression:"formLabelAlign.type"}})],1)],1)],1),t("p",[s._v("El atributo "),t("code",[s._v("label-position")]),s._v(" decide cómo se alinean las etiquetas, puede estar "),t("code",[s._v("top")]),s._v(" o "),t("code",[s._v("left")]),s._v(". Cuando se establece en "),t("code",[s._v("top")]),s._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("Left"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("Right"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("Top"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 20px;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-position")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.name"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.region"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("labelPosition")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formLabelAlign")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n\n',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: 'Please input Activity name', trigger: 'blur' },\n            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: 'Please select Activity zone', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: 'Please select activity resource', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: 'Please input activity form', 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[t("el-input",{model:{value:s.ruleForm.name,callback:function(a){s.$set(s.ruleForm,"name",a)},expression:"ruleForm.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[t("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(a){s.$set(s.ruleForm,"region",a)},expression:"ruleForm.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time",required:""}},[t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date1"}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(a){s.$set(s.ruleForm,"date1",a)},expression:"ruleForm.date1"}})],1)],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date2"}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(a){s.$set(s.ruleForm,"date2",a)},expression:"ruleForm.date2"}})],1)],1)],1),t("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[t("el-switch",{model:{value:s.ruleForm.delivery,callback:function(a){s.$set(s.ruleForm,"delivery",a)},expression:"ruleForm.delivery"}})],1),t("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[t("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(a){s.$set(s.ruleForm,"type",a)},expression:"ruleForm.type"}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[t("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(a){s.$set(s.ruleForm,"resource",a)},expression:"ruleForm.resource"}},[t("el-radio",{attrs:{label:"Sponsorship"}}),t("el-radio",{attrs:{label:"Venue"}})],1)],1),t("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[t("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(a){s.$set(s.ruleForm,"desc",a)},expression:"ruleForm.desc"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("ruleForm")}}},[s._v("Create")]),t("el-button",{on:{click:function(a){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("Sólo tiene que añadir el atributo "),t("code",[s._v("rules")]),s._v(" en el componente "),t("code",[s._v("Form")]),s._v(", pasar las reglas de validación y establecer el atributo "),t("code",[s._v("prop")]),s._v(" para "),t("code",[s._v("Form-Item")]),s._v(" como una clave específica que necesita ser validada. Ver más información en "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.name"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"region"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.region"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.date1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.date2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.delivery"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Sponsorship"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.desc"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ruleForm")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input Activity name'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" },\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Length should be 3 to 5'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please select Activity zone'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please pick a date'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please pick a time'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'array'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please select at least one activity type'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please select activity resource'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input activity form'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n            alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm2.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('Please input digits'));\n          } else {\n            if (value < 18) {\n              callback(new Error('Age must be greater than 18'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password'));\n        } else {\n          if (this.ruleForm2.checkPass !== '') {\n            this.$refs.ruleForm2.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password again'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error('Two inputs don\\'t match!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm2: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules2: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Password",prop:"pass"}},[t("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:s.ruleForm2.pass,callback:function(a){s.$set(s.ruleForm2,"pass",a)},expression:"ruleForm2.pass"}})],1),t("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[t("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:s.ruleForm2.checkPass,callback:function(a){s.$set(s.ruleForm2,"checkPass",a)},expression:"ruleForm2.checkPass"}})],1),t("el-form-item",{attrs:{label:"Age",prop:"age"}},[t("el-input",{model:{value:s.ruleForm2.age,callback:function(a){s.$set(s.ruleForm2,"age",s._n(a))},expression:"ruleForm2.age"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("ruleForm2")}}},[s._v("Submit")]),t("el-button",{on:{click:function(a){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("Aquí utilizamos el "),t("code",[s._v("status-icon")]),s._v(" para reflejar el resultado de la validación como un icono.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status-icon")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Password"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.pass"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Confirm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.checkPass"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Age"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.age"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" checkAge = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input the age'")]),s._v("));\n        }\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input digits'")]),s._v("));\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value < "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(") {\n              callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Age must be greater than 18'")]),s._v("));\n            } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(");\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n          callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input the password'")]),s._v("));\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass2 = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n          callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input the password again'")]),s._v("));\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value !== "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ruleForm2")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass, "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass2, "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n          ],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": [\n            { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": checkAge, "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n            alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item prop="email" label="Email" :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n    ]">\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="\'Domain\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }">\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\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      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[t("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[t("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(a){s.$set(s.dynamicValidateForm,"email",a)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(a,e){return t("el-form-item",{key:a.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[t("el-input",{model:{value:a.value,callback:function(t){s.$set(a,"value",t)},expression:"domain.value"}}),t("el-button",{on:{click:function(t){t.preventDefault(),s.removeDomain(a)}}},[s._v("Delete")])],1)}),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),t("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),t("el-button",{on:{click:function(a){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),t("p",[s._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),t("code",[s._v("form")]),s._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"email"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Email"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'Domain' + index\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"domain.key"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"domain.value"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click.prevent")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dynamicValidateForm")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("domains")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n          }],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n            alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" index = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index !== "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n        }\n      },\n      addDomain() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now(),\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="age" prop="age" :rules="[\n      { required: true, message: \'age is required\'},\n      { type: \'number\', message: \'age must be a number\'}\n    ]">\n    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[t("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[t("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:s.numberValidateForm.age,callback:function(a){s.$set(s.numberValidateForm,"age",s._n(a))},expression:"numberValidateForm.age"}})],1),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),t("el-button",{on:{click:function(a){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),t("p",[s._v("La validacion numerica necesita un modificador "),t("code",[s._v(".number")]),s._v(" añadido en el enlace "),t("code",[s._v("v-model")]),s._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm.age"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("numberValidateForm")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n            alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-form",{ref:"form",attrs:{model:s.sizeForm,"label-width":"120px",size:"mini"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{model:{value:s.sizeForm.name,callback:function(a){s.$set(s.sizeForm,"name",a)},expression:"sizeForm.name"}})],1),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.sizeForm.region,callback:function(a){s.$set(s.sizeForm,"region",a)},expression:"sizeForm.region"}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t("el-form-item",{attrs:{label:"Activity time"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.sizeForm.date1,callback:function(a){s.$set(s.sizeForm,"date1",a)},expression:"sizeForm.date1"}})],1),t("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.sizeForm.date2,callback:function(a){s.$set(s.sizeForm,"date2",a)},expression:"sizeForm.date2"}})],1)],1),t("el-form-item",{attrs:{label:"Activity type"}},[t("el-checkbox-group",{model:{value:s.sizeForm.type,callback:function(a){s.$set(s.sizeForm,"type",a)},expression:"sizeForm.type"}},[t("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t("el-form-item",{attrs:{label:"Resources"}},[t("el-radio-group",{attrs:{size:"medium"},model:{value:s.sizeForm.resource,callback:function(a){s.$set(s.sizeForm,"resource",a)},expression:"sizeForm.resource"}},[t("el-radio",{attrs:{border:"",label:"Sponsor"}}),t("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t("el-form-item",{attrs:{size:"large"}},[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),t("el-button",[s._v("Cancel")])],1)],1)],1),t("p",[s._v("Aún así, puede ajustar el "),t("code",[s._v("size")]),s._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.name"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.region"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.date1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.date2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.type"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.resource"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sizeForm")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Form consiste en "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("checkbox")]),s._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form básico")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Incluye todo tipo de entradas, tales como "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(" y "),t("code",{pre:!0},[s._v("checkbox")]),s._v(".")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[t("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[s._v("W3C")]),s._v(" reglamenta que")]),t("blockquote",[t("p",[t("i",[s._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),t("b",[s._v("Enter")]),s._v(" en ese campo como una solicitud para enviar el formulario.")])])]),t("p",[s._v("Para prevenir este comportamiento, puede agregar "),t("code",{pre:!0},[s._v("@submit.native.prevent")]),s._v(" on "),t("code",{pre:!0},[s._v("<el-form>")]),s._v(".")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"formulario-inline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulario inline")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"alineamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineamiento")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"validacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("El componente "),a("code",{pre:!0},[this._v("form")]),this._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Reglas personalizadas de validación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"validacion-numerica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación numerica")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("Cuando un "),a("code",{pre:!0},[this._v("el-form-item")]),this._v(" está anidado en otro "),a("code",{pre:!0},[this._v("el-form-item")]),this._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),a("code",{pre:!0},[this._v("el-form-item")]),this._v(".")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamano-del-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño del control")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Todos los componentes de un formulario heredan su atributo "),a("code",{pre:!0},[this._v("size")]),this._v(". De manera similar, FormItem también tiene un atributo "),a("code",{pre:!0},[this._v("size")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("model")]),t("td",[s._v("Datos del componente")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("Reglas de validación")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inline")]),t("td",[s._v("Si el form es inline")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("label-position")]),t("td",[s._v("Posicion de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("left / right / top")]),t("td",[s._v("right")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-suffix")]),t("td",[s._v("sufijo de la etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("hide-required-asterisk")]),t("td",[s._v("si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("si mostrar o no el mensaje de error")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inline-message")]),t("td",[s._v("si desea visualizar el mensaje de error inline con la posición del form item")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status-icon")]),t("td",[s._v("si desea visualizar un icono que indique el resultado de la validación")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("validate-on-rule-change")]),t("td",[s._v("si se dispara la validacion cuando el prop "),t("code",{pre:!0},[s._v("rules")]),s._v(" cambia")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("el tamaño de los componentes en este form")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si se desactivan todos los componentes del formulario. Si esta en "),t("code",{pre:!0},[s._v("true")]),s._v(" no puede ser cambiado por el prop "),t("code",{pre:!0},[s._v("disabled")]),s._v(" individual de los componentes.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("validate")]),t("td",[s._v("el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return")]),t("td",[s._v("Function(callback: Function(boolean, object))")])]),t("tr",[t("td",[s._v("clearValidate")]),t("td",[s._v("borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.")]),t("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),t("tr",[t("td",[s._v("resetFields")]),t("td",[s._v("restablece todos los campos y elimina el resultado de validación")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("validate")]),t("td",[s._v("se dispara después de validar un item del formulario")]),t("td",[s._v("la propiedad ("),t("code",{pre:!0},[s._v("prop name")]),s._v(") nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe.")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("prop")]),t("td",[s._v("un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio.")]),t("td",[s._v("string")]),t("td",[s._v("Clave del modelo que se ha pasado a  "),t("code",{pre:!0},[s._v("form")])]),t("td")]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("ancho de la etiqueta, e.g. '50px'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("required")]),t("td",[s._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("reglas de validacion del form")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("error")]),t("td",[s._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("si mostrar o no el mensaje de error")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inline-message")]),t("td",[s._v("mensaje de validación estilo inline")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("Tamaño de los componentes en este form item")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("contenido del Form Item")])]),a("tr",[a("td",[this._v("label")]),a("td",[this._v("contenido de la etiqueta")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-item-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("error")]),a("td",[this._v("Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error }")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"form-item-metodo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Metodo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("resetField")]),t("td",[s._v("restablecer campo actual y eliminar resultado de validación")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearValidate")]),t("td",[s._v("elimina el estado de la validacion de un campo")]),t("td",[s._v("-")])])])])}],!1,null,null,null);l.options.__file="form.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40),value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}},r=(t(537),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Use el Time Picker para input de tipo time.")]),s._m(1),t("p",[s._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-time-select v-model=\"value1\" :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\" placeholder=\"Select time\">\n</el-time-select>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("p",[s._v("Use el tag "),t("code",[s._v("el-time-select")]),s._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),t("code",[s._v("start")]),s._v(", "),t("code",[s._v("end")]),s._v(" y "),t("code",[s._v("step")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Un tiempo arbitrario puede ser escogido.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker v-model="value2" :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }" placeholder="Arbitrary time">\n  </el-time-picker>\n  <el-time-picker arrow-control="" v-model="value3" :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }" placeholder="Arbitrary time">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40),\n        value3: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}}),t("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})]],2),t("p",[s._v("Al usar el tag "),t("code",[s._v("el-time-picker")]),s._v(", es posible limitar el rango de tiempo al especificar "),t("code",[s._v("selectableRange")]),s._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),t("code",[s._v("arrow-control")]),s._v(" esté establecido.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("),\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),t("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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(a){s.startTime=a},expression:"startTime"}}),t("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(a){s.endTime=a},expression:"endTime"}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"startTime"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"endTime"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"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  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startTime")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endTime")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Es posible escoger un rango de tiempo arbitrario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker is-range v-model="value4" range-separator="To" start-placeholder="Start time" end-placeholder="End time">\n  </el-time-picker>\n  <el-time-picker is-range="" arrow-control v-model="value5" range-separator="To" start-placeholder="Start time" end-placeholder="End time">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}}),t("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})]],2),t("p",[s._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),t("code",[s._v("is-range")]),s._v(". También, "),t("code",[s._v("arrow-control")]),s._v(" es soportado en modo de rango.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),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)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"selector-de-tiempo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de Tiempo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo fijo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo arbitrario")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo fijo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo arbitrario")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("date(TimePicker) / string(TimeSelect)")]),t("td",[s._v("-")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si el Time Picker está en modo de sólo lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Time Picker se encuentra deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si el input puede ser editado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si mostrar el botón de borrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder en un modo fuera de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para el tiempo de inicio en modo de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para el tiempo de finalización en modo de rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("is-range")]),t("td",[s._v("si es posible escoger un rango de tiempo, solo funciona con "),t("code",{pre:!0},[s._v("<el-time-picker>")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("arrow-control")]),t("td",[s._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),t("code",{pre:!0},[s._v("<el-time-picker>")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left / center / right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el dropdown del Time Picker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, revisar la tabla posterior")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rango")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, fecha por defecto del calendario")]),t("td",[s._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),t("td",[s._v("cualquier cosa aceptada por "),t("code",{pre:!0},[s._v("new Date()")]),s._v(" para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("como "),t("code",{pre:!0},[s._v("name")]),s._v(" en input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono de prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-time")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opciones-para-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("start")]),t("td",[s._v("tiempo de inicio")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("09:00")])]),t("tr",[t("td",[s._v("end")]),t("td",[s._v("tiempo de finalización")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("18:00")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("salto de tiempo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:30")])]),t("tr",[t("td",[s._v("minTime")]),t("td",[s._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:00")])]),t("tr",[t("td",[s._v("maxTime")]),t("td",[s._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opciones-para-time-picker-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("selectableRange")]),t("td",[s._v("rango de tiempo disponible p.ej. "),t("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("ó"),t("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),t("td",[s._v("string / array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato para el selector")]),t("td",[s._v("string")]),t("td",[s._v("hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("HH:mm:ss")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se lanza cuando el usuario confirma el valor")]),t("td",[s._v("valor vinculado del componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se lanza cuando el input se difumina")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se lanza cuando el input se enfoca")]),t("td",[s._v("instancia del componente")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[this._v("focus")]),a("td",[this._v("coloca el foco en el input")]),a("td",[this._v("—")])])])])}],!1,null,null,null);l.options.__file="time-picker.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,a){console.log(s,a)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,a){this.imageUrl=URL.createObjectURL(a.raw)},beforeAvatarUpload:function(s){var a="image/jpeg"===s.type,t=s.size/1024/1024<2;return a||this.$message.error("Avatar picture must be JPG format!"),t||this.$message.error("Avatar picture size can not exceed 2MB!"),a&&t},handleChange:function(s,a){this.fileList3=a.slice(-3)},handleExceed:function(s,a){this.$message.warning("You can upload up to 3 files. You selected "+s.length+" files this time, and "+(s.length+a.length)+" files totally")}}},r=(t(544),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Carga archivos haciendo clic o arrastrándolos.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("p",[s._v("Personalice el tipo y texto del botón utilizando la propiedad "),t("code",[s._v("slot")]),s._v(". Defina las propiedades "),t("code",[s._v("limit")]),s._v(" y "),t("code",[s._v("on-exceed")]),s._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":limit")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-exceed")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleExceed"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n      },\n      handleExceed(files, fileList) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.warning("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`El límite es 3, haz seleccionado "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" archivos esta vez, añade hasta "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v("`")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('La imagen debe estar en formato JPG!');\n        }\n        if (!isLt2M) {\n          this.$message.error('La imagen excede los 2MB!');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n",style:"\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?t("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"avatar-uploader"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-file-list")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-success")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":before-upload")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" dashed "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d9d9d9")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":hover")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("28px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#8c939d")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("imageUrl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isJPG = file.type === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'image/jpeg'")]),s._v(";\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isLt2M = file.size / "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" / "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" < "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isJPG) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'La imagen debe estar en formato JPG!'")]),s._v(");\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isLt2M) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'La imagen excede los 2MB!'")]),s._v(");\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt>\n</el-dialog>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[t("i",{staticClass:"el-icon-plus"})]),t("el-dialog",{attrs:{visible:s.dialogVisible},on:{"update:visible":function(a){s.dialogVisible=a}}},[t("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"picture-card"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-plus"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100%"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogImageUrl"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("alt")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogImageUrl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogVisible = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\n      return {\n        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList2")]),s._v(": [{"),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList3">\n  <el-button size="small" type="primary">Clic para subir archivo</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\n      return {\n        fileList3: [{\n          name: 'food.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }, {\n          name: 'food2.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[t("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Clic para subir archivo")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Clic para subir archivo"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("\n        }]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fileList3 = fileList.slice("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[t("i",{staticClass:"el-icon-upload"}),t("div",{staticClass:"el-upload__text"},[s._v("Suelta tu archivo aquí o "),t("em",[s._v("haz clic para cargar")])]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("drag")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Suelta tu archivo aquí o "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("haz clic para cargar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>\n  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s._v("Selecciona un archivo")]),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("Cargar al servidor")]),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":auto-upload")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"trigger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Selecciona un archivo"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px;"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"submitUpload"')]),s._v(">")]),s._v("Cargar al servidor"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("Solo archivos jpg/png con un tamaño menor de 500kb"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"carga-de-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga de archivos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"clic-para-cargar-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clic para cargar archivos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargar avatar de usuario")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Utilice el "),a("em",[this._v("hook")]),a("code",{pre:!0},[this._v("before-upload")]),this._v(" para limitar el formato de archivo y su tamaño.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"pared-de-fotografias"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pared de fotografías")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Utilice la propiedad "),a("code",{pre:!0},[this._v("list-type")]),this._v(" para cambiar el estilo a un listado de archivos.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lista de archivos con miniatura")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"control-de-lista-de-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Control de lista de archivos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Utilice el "),a("em",[this._v("hook")]),a("code",{pre:!0},[this._v("on-change")]),this._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrastrar para cargar archivo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"carga-normal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga normal")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("action")]),t("td",[s._v("obligatorio, URL de la petición")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("headers")]),t("td",[s._v("cabeceras de la petición")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("especifica si se permite subir múltiples archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("data")]),t("td",[s._v("opciones adicionales de la petición")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("nombre clave del archivo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("file")])]),t("tr",[t("td",[s._v("with-credentials")]),t("td",[s._v("especifica si enviará cookies")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-file-list")]),t("td",[s._v("especifica si se debe mostrar la lista de archivos cargados")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("drag")]),t("td",[s._v("se especifica si se activará el modo arrastrar y soltar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("accept")]),t("td",[s._v("acepta "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("tipos de archivos")]),s._v(", puede no funcionar cuando "),t("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" esta en "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-preview")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado al hacer clic en los archivos subidos")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-remove")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando los archivos son eliminados")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-success")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando los archivos fueron cargados correctamente")]),t("td",[s._v("function(response, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-error")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando han ocurrido algunos errores")]),t("td",[s._v("function(err, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-progress")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando se produce algún progreso")]),t("td",[s._v("function(event, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-change")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-upload")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),t("code",{pre:!0},[s._v("true")]),s._v(" o "),t("code",{pre:!0},[s._v("Promise")]),s._v(" entonces será rechazado, la carga puede ser cancelada")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-remove")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" o se devuelve una "),t("code",{pre:!0},[s._v("Promise")]),s._v(" y que luego es rechazada, la eliminación será abortada.")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("thumbnail-mode")]),t("td",[s._v("especifica si se mostrará la miniatura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("file-list")]),t("td",[s._v("archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[]")])]),t("tr",[t("td",[s._v("list-type")]),t("td",[s._v("tipo de lista de archivos")]),t("td",[s._v("string")]),t("td",[s._v("text/picture/picture-card")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("auto-upload")]),t("td",[s._v("se especifica si se autocargan archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("http-request")]),t("td",[s._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si se deshabilita la carga de archivos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("limit")]),t("td",[s._v("número máximo de cargas permitidas")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-exceed")]),t("td",[t("em",[s._v("hook")]),s._v(" lanzado cuando el límite ha sido excedido")]),t("td",[s._v("function(files, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[this._v("trigger")]),a("td",[this._v("contenido que desencadena el diálogo de archivo")])]),a("tr",[a("td",[this._v("tip")]),a("td",[this._v("contenido de los tips")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("clearFiles")]),t("td",[s._v("limpia la lista de archivos cargados (este método no esta soportado en el "),t("em",[s._v("hook")]),t("code",{pre:!0},[s._v("before-upload")]),s._v(")")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("abort")]),t("td",[s._v("cancela la petición de carga")]),t("td",[s._v("（ file: fileList's item ）")])]),t("tr",[t("td",[s._v("submit")]),t("td",[s._v("La lista de archivos se sube manualmente")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="upload.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(a){s.$message({type:"info",message:"action: "+a})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(a){var t=a.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+t})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,a=this.$createElement;this.$msgbox({title:"Message",message:a("p",null,[a("span",null,"Message can be "),a("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,a,t){"confirm"===s?(a.confirmButtonLoading=!0,a.confirmButtonText="Loading...",setTimeout(function(){t(),setTimeout(function(){a.confirmButtonLoading=!1},300)},3e3)):t()}}).then(function(a){setTimeout(function(){s.$message({type:"info",message:"action: "+a})},200)})},open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){s.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(a){s.$message({type:"info",message:"cancel"===a?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})},open7:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"Delete completed"})}).catch(function(){s.$message({type:"info",message:"Delete canceled"})})}}},r=t(0),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.")]),s._m(1),s._m(2),t("p",[s._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Desplegar una alerta utilizando el metodo "),t("code",[s._v("$alert")]),s._v(". Simula el sistema "),t("code",[s._v("alert")]),s._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),t("code",[s._v("message")]),s._v(" y "),t("code",[s._v("title")]),s._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),t("code",[s._v("Promise")]),s._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),t("code",[s._v("Promise")]),s._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`action: "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),t("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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Llamando al metodo "),t("code",[s._v("$confirm")]),s._v(" para abrir el componente confirm, y simula el sistema "),t("code",[s._v("confirm")]),s._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),t("code",[s._v("options")]),s._v(" que es literalmente un objeto. El atributo "),t("code",[s._v("type")]),s._v(" indica el tipo de mensaje, y su valor puede ser "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("error")]),s._v(", "),t("code",[s._v("info")]),s._v(" y "),t("code",[s._v("warning")]),s._v(". Se debe tener en cuenta que el segundo atributo "),t("code",[s._v("title")]),s._v(" debe ser de tipo "),t("code",[s._v("string")]),s._v(", y si es de tipo "),t("code",[s._v("object")]),s._v(", sera manejado como el atributo "),t("code",[s._v("options")]),s._v(". Aqui utilizamos "),t("code",[s._v("Promise")]),s._v(" para manejar posteriormente el proceso.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open2() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n        }).then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n          });\n        }).catch("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open3">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Llamando al metodo "),t("code",[s._v("$prompt")]),s._v(" desplegamos el componente prompt, y simula el sistema "),t("code",[s._v("prompt")]),s._v(".Puedes utilizar el parametro "),t("code",[s._v("inputPattern")]),s._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),t("code",[s._v("inputValidator")]),s._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),t("code",[s._v("Boolean")]),s._v(" o "),t("code",[s._v("String")]),s._v(". Al regresar "),t("code",[s._v("false")]),s._v(" o "),t("code",[s._v("String")]),s._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),t("code",[s._v("inputErrorMessage")]),s._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),t("code",[s._v("inputPlaceholder")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open3() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Please input your e-mail'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tip'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Invalid Email'")]),s._v("\n        }).then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("{ value }")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Your email is:'")]),s._v(" + value\n          });\n        }).catch("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input canceled'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Puede ser personalizado para mostrar diversos contenidos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open4">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open4() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),t("code",[s._v("$msgbox")]),s._v(". En este ejemplo se realiza una llamada al metodo "),t("code",[s._v("$msgbox")]),s._v(" directamente utilizando el atributo "),t("code",[s._v("showCancelButton")]),s._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),t("code",[s._v("cancelButtonClass")]),s._v(" para agregar un estilo personalizado y el atributo "),t("code",[s._v("cancelButtonText")]),s._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),t("code",[s._v("beforeClose")]),s._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),t("code",[s._v("action")]),s._v(", "),t("code",[s._v("instance")]),s._v(" y "),t("code",[s._v("done")]),s._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),t("code",[s._v("loading")]),s._v(" para el boton de confirmacion; puede invocar el metodo "),t("code",[s._v("done")]),s._v(" para cerrar la instancia del componente MessageBox  (si el metodo "),t("code",[s._v("done")]),s._v(" no es llamado dentro del atributo "),t("code",[s._v("beforeClose")]),s._v(", la instancia no podra cerrarse).")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open4() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n            h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n            h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n          ]),\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading...'")]),s._v(";\n              setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n                }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n              }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n            } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open5">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open5() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Establezca el valor de "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" a true y "),t("code",[s._v("message")]),s._v(" sera tratado como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open5() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'<strong>This is <i>HTML</i> string</strong>'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),t("p",[s._v("En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open6">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open6() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Por defecto, los parámetros de "),t("code",[s._v("Promise's reject callback")]),s._v(" y "),t("code",[s._v("callback")]),s._v(" son "),t("code",[s._v("cancel")]),s._v(" cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si "),t("code",[s._v("distinguishCancelAndClose")]),s._v(" está ajustado a "),t("code",[s._v("true")]),s._v(", los parámetros de las dos operaciones anteriores son "),t("code",[s._v("cancel")]),s._v(" y "),t("code",[s._v("close")]),s._v(" respectivamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open6() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'You have unsaved changes, save and proceed?'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Confirm'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("distinguishCancelAndClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Save'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Discard Changes'")]),s._v("\n        })\n          .then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Changes saved. Proceeding to a new route.'")]),s._v("\n            });\n          })\n          .catch("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": action === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v("\n                ? "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Changes discarded. Proceeding to a new route.'")]),s._v("\n                : "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Stay in the current route'")]),s._v("\n            })\n          });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("El contenido del componente MessageBox puede ser centrado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open7">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open7}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Establecer "),t("code",[s._v("center")]),s._v(" a "),t("code",[s._v("true")]),s._v(" centrara el contenido")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open7() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n        }).then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n          });\n        }).catch("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n          });\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),a("code",{pre:!0},[this._v("alert")]),this._v(", "),a("code",{pre:!0},[this._v("confirm")]),this._v(" y "),a("code",{pre:!0},[this._v("prompt")]),this._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("El contenido de MessageBox puede ser "),t("code",{pre:!0},[s._v("VNode")]),s._v(", permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo "),t("code",{pre:!0},[s._v("VNode")]),s._v(" con el viejo "),t("code",{pre:!0},[s._v("VNode")]),s._v(", y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ("),t("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[s._v("#8931")]),s._v("). En este caso, se puede añadir una clave única a "),t("code",{pre:!0},[s._v("VNode")]),s._v(" cada vez que se abre MessageBox: "),t("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[s._v("ejemplo")]),s._v(".")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"utiliza-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". Entonces cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" esta activada, asegurece que el contendio de "),t("code",{pre:!0},[s._v("message")]),s._v(" sea de confianza, y "),t("strong",[s._v("nunca")]),s._v(" asignar "),t("code",{pre:!0},[s._v("message")]),s._v(" a contenido generado por el usuario.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguir entre cancelar y cerrar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos-globales"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),t("code",{pre:!0},[s._v("$msgbox")]),s._v(", "),t("code",{pre:!0},[s._v("$alert")]),s._v(", "),t("code",{pre:!0},[s._v("$confirm")]),s._v(" y "),t("code",{pre:!0},[s._v("$prompt")]),s._v(". Asi que en una instancia de Vue puedes llamar el metodo "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("code",{pre:!0},[s._v("$msgbox(options)")])]),t("li",[t("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$alert(message, options)")])]),t("li",[t("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$confirm(message, options)")])]),t("li",[t("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" or "),t("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"importacion-local"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Si prefieres importar "),a("code",{pre:!0},[this._v("MessageBox")]),this._v(" cuando lo necesites (on demand):")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { MessageBox } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Los metodos correspondientes: "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.alert")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.confirm")]),s._v(" y "),t("code",{pre:!0},[s._v("MessageBox.prompt")]),s._v(". Los parametros son los mismos que los anteriores.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Permitidos")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo del componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("contenido del componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("utilizado para que "),t("code",{pre:!0},[s._v("message")]),s._v(" sea tratado como una cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de mensaje , utilizado para mostrar el  icono")]),t("td",[s._v("string")]),t("td",[s._v("success / info / warning / error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("clase personalizada para el icono, sobreescribe "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de la clase personzalida para el componente MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("callback")]),t("td",[s._v("MessageBox callback al cerrar si no desea utilizar Promise")]),t("td",[s._v("function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e "),t("code",{pre:!0},[s._v("instance")]),s._v("  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("beforeClose")]),t("td",[s._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),t("td",[s._v("function(action, instance, done), donde "),t("code",{pre:!0},[s._v("action")]),s._v(" pueden ser 'confirm', 'cancel' o 'close'; "),t("code",{pre:!0},[s._v("instance")]),s._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),t("code",{pre:!0},[s._v("done")]),s._v(" es para cerrar la instancia")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("distinguishCancelAndClose")]),t("td",[s._v("si se debe distinguir entre cancelar y cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("lockScroll")]),t("td",[s._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("showCancelButton")]),t("td",[s._v("utlizado para mostrar un boton cancelar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true cuando es llamado con confirm y prompt)")])]),t("tr",[t("td",[s._v("showConfirmButton")]),t("td",[s._v("utlizado para mostrar un boton confirmar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("cancelButtonText")]),t("td",[s._v("contenido de texto del boton cancelar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Cancel")])]),t("tr",[t("td",[s._v("confirmButtonText")]),t("td",[s._v("contenido de texto del boton confirmar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("OK")])]),t("tr",[t("td",[s._v("cancelButtonClass")]),t("td",[s._v("nombre de la clase personalizada del boton cancelar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("confirmButtonClass")]),t("td",[s._v("nombre de la clase personalizada del boton confirmar")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closeOnClickModal")]),t("td",[s._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false cuando es llamado con alert)")])]),t("tr",[t("td",[s._v("closeOnPressEscape")]),t("td",[s._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false cuando es llamado con alert)")])]),t("tr",[t("td",[s._v("closeOnHashChange")]),t("td",[s._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("showInput")]),t("td",[s._v("utilizado para mostrar el componente input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true cuando es llamado con prompt)")])]),t("tr",[t("td",[s._v("inputPlaceholder")]),t("td",[s._v("placeholder para el componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputType")]),t("td",[s._v("tipo del componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("inputValue")]),t("td",[s._v("valor inicial del componente input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputPattern")]),t("td",[s._v("regexp del componente input")]),t("td",[s._v("regexp")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputValidator")]),t("td",[s._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputErrorMessage")]),t("td",[s._v("mensaje de error cuando la validacion falla")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Illegal input")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("utilizado para alinear el contenido al centro")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("roundButton")]),t("td",[s._v("utilizado para redondear el boton")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);l.options.__file="message-box.md";a.default=l.exports},,,,,function(s,a,t){"use strict";t.r(a);var e=t(1),r={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),a=s[0],t=s[s.length-1];Object(e.a)(a,"first"),Object(e.a)(t,"last")})}},l=(t(527),t(0)),n=Object(l.a)(r,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">When you have few pages</span>\n  <el-pagination layout="prev, pager, next" :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">When you have more than 7 pages</span>\n  <el-pagination layout="prev, pager, next" :total="1000">\n  </el-pagination>\n</div>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),t("p",[s._v("Asigne en el atributo "),t("code",[s._v("layout")]),s._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),t("code",[s._v("prev")]),s._v(" (un botón para navegar a la página anterior), "),t("code",[s._v("next")]),s._v(" (un botón para navegar a la siguiente página), "),t("code",[s._v("pager")]),s._v(" (lista de página), "),t("code",[s._v("jumper")]),s._v(" (un "),t("code",[s._v("input")]),s._v(" para saltar a una página determinada), "),t("code",[s._v("total")]),s._v(" (total de elementos), "),t("code",[s._v("size")]),s._v(" (un "),t("code",[s._v("select")]),s._v(" para seleccionar el tamaño de la página ) y "),t("code",[s._v("->")]),s._v("(todo elemento situado luego de este símbolo será movido a la derecha).")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">\n</el-pagination>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1),t("p",[s._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),t("code",[s._v("pager-count")]),s._v(" attribute.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":pager-count")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Usa una paginación pequeña en caso de espacio limitado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-pagination small layout="prev, pager, next" :total="50">\n</el-pagination>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),t("p",[s._v("Solo ponga el atributo "),t("code",[s._v("small")]),s._v(" como "),t("code",[s._v("true")]),s._v(" y la Paginación se volverá pequeña.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("small")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Agrega más modulos basados en su escenario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Total item count</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Change page size</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Jump to</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">All combined</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">\n    </el-pagination>\n  </div>\n</template>\n\n',script:"\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Total item count")]),t("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage1=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Change page size")]),t("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage2=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Jump to")]),t("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage3=a}}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("All combined")]),t("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(a){s.currentPage4=a}}})],1)]],2),t("p",[s._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),t("code",[s._v("size-change")]),s._v(" y "),t("code",[s._v("current-change")]),s._v(" para manejar el tamaño de página y el cambio de página. El atributo "),t("code",[s._v("page-sizes")]),s._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),t("code",[s._v("sizes")]),s._v(" que es un "),t("code",[s._v("select")]),s._v(", ejemplo "),t("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicará que el "),t("code",[s._v("select")]),s._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"total, prev, pager, next"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`"),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`current page: "),t("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"paginacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"number-of-pagers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"paginacion-pequena"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación pequeña")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"mas-elementos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más elementos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("small")]),t("td",[s._v("usar paginación pequeña")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("page-size")]),t("td",[s._v("cantidad de elementos por página, soporta el modificador .sync")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("10")])]),t("tr",[t("td",[s._v("total")]),t("td",[s._v("total de elementos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("page-count")]),t("td",[s._v("total de páginas. Asigna "),t("code",{pre:!0},[s._v("total")]),s._v(" o "),t("code",{pre:!0},[s._v("page-count")]),s._v(" y las páginas serán mostradas; si necesitas "),t("code",{pre:!0},[s._v("page-sizes")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(" es "),t("strong",[s._v("requerido")])]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("pager-count")]),t("td",[s._v("número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor.")]),t("td",[s._v("number")]),t("td",[s._v("odd number between 5 and 21")]),t("td",[s._v("7")])]),t("tr",[t("td",[s._v("current-page")]),t("td",[s._v("número actual de la página, soporta el modificador .sync")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("layout")]),t("td",[s._v("layout de la paginación, elementos separados por coma")]),t("td",[s._v("string")]),t("td",[t("code",{pre:!0},[s._v("sizes")]),s._v(", "),t("code",{pre:!0},[s._v("prev")]),s._v(", "),t("code",{pre:!0},[s._v("pager")]),s._v(", "),t("code",{pre:!0},[s._v("next")]),s._v(", "),t("code",{pre:!0},[s._v("jumper")]),s._v(", "),t("code",{pre:!0},[s._v("->")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(", "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),t("tr",[t("td",[s._v("page-sizes")]),t("td",[s._v("opciones para la cantidad de elementos por página")]),t("td",[s._v("number[]")]),t("td",[s._v("—")]),t("td",[s._v("[10, 20, 30, 40, 50, 100]")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("clase propia para el "),t("code",{pre:!0},[s._v("dropdown")]),s._v(" del "),t("code",{pre:!0},[s._v("select")]),s._v(" del número de páginas")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prev-text")]),t("td",[s._v("texto para el botón "),t("code",{pre:!0},[s._v("prev")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next-text")]),t("td",[s._v("texto para el botón "),t("code",{pre:!0},[s._v("next")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Pagination esta disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("size-change")]),t("td",[s._v("se dispara cuando "),t("code",{pre:!0},[s._v("page-size")]),s._v(" cambia")]),t("td",[s._v("nuevo valor de "),t("code",{pre:!0},[s._v("page-size")])])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("se dispara cuando "),t("code",{pre:!0},[s._v("current-page")]),s._v(" cambia")]),t("td",[s._v("nuevo valor de "),t("code",{pre:!0},[s._v("current-page")])])]),t("tr",[t("td",[s._v("prev-click")]),t("td",[s._v("Se dispara cuando el boton "),t("code",{pre:!0},[s._v("prev")]),s._v(" recibe el click y la pagina actual cambia")]),t("td",[s._v("la nueva pagina actual")])]),t("tr",[t("td",[s._v("next-click")]),t("td",[s._v("Se dispara cuando el boton "),t("code",{pre:!0},[s._v("next")]),s._v(" recibe el click y la pagina actual cambia")]),t("td",[s._v("la nueva pagina actual")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("Elemento propio. Para utilizar esto necesitas declarar "),a("code",{pre:!0},[this._v("slot")]),this._v(" en el "),a("code",{pre:!0},[this._v("layout")])])])])])}],!1,null,null,null);n.options.__file="pagination.md";a.default=n.exports},,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{visible:!1,visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}]}}},r=(t(528),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-popover placement="top-start" title="Title" width="200" trigger="hover" content="this is content, this is content, this is content">\n    <el-button slot="reference">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover placement="bottom" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">\n    <el-button slot="reference">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover ref="popover" placement="right" title="Title" width="200" trigger="focus" content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover placement="bottom" title="Title" width="200" trigger="manual" content="this is content, this is content, this is content" v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Hover to activate")])],1),t("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Click to activate")])],1),t("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[s._v("Focus to activate")]),t("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:s.visible,callback:function(a){s.visible=a},expression:"visible"}},[t("el-button",{attrs:{slot:"reference"},on:{click:function(a){s.visible=!s.visible}},slot:"reference"},[s._v("Manual to activate")])],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("trigger")]),s._v(" es usado para definir como el popover se dispara: "),t("code",[s._v("hover")]),s._v(", "),t("code",[s._v("click")]),s._v(", "),t("code",[s._v("focus")]),s._v(" o "),t("code",[s._v("manual")]),s._v(". As for the triggering element, you can write it in two different ways: use the "),t("code",[s._v('slot="reference"')]),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[s._v("named slot")]),s._v(", or use the "),t("code",[s._v("v-popover")]),s._v(" directive and set it to Popover's "),t("code",[s._v("ref")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Hover to activate"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Click to activate"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"popover"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"focus"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-popover:popover")]),s._v(">")]),s._v("Focus to activate"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"manual"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible = !visible"')]),s._v(">")]),s._v("Manual to activate"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("visible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover placement="right" width="400" trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-04',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-01',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-03',\n          name: 'Jack',\n          address: 'New York City'\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Click to activate")])],1)],1),t("p",[s._v("Reemplaza el atributo "),t("code",[s._v("content")]),s._v(" con un "),t("code",[s._v("slot")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Click to activate"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover placement="top" width="160" v-model="visible2">\n  <p>Are you sure to delete this?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n  </div>\n  <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-popover",{attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(a){s.visible2=a},expression:"visible2"}},[t("p",[s._v("Are you sure to delete this?")]),t("div",{staticStyle:{"text-align":"right",margin:"0"}},[t("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(a){s.visible2=!1}}},[s._v("cancel")]),t("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(a){s.visible2=!1}}},[s._v("confirm")])],1),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Delete")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"160"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Delete"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("visible2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Similar a un Tooltip, Popover está construido con "),a("code",{pre:!0},[this._v("Vue-popper")]),this._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"informacion-anidada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Información anidada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"operacion-anidada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Operación anidada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),a("code",{pre:!0},[this._v("dialog")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("cómo se dispara el popover")]),t("td",[s._v("string")]),t("td",[s._v("click/focus/hover/manual")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del popover")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("contenido del popover, puede ser sustituido por un "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del popover")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("Min width 150px")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("posición del popover en la pantalla")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el popover está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("si el popover está visible")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("popover offset")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("popover transition animation")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[s._v("parámetros para "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[s._v("object")]),t("td",[s._v("por favor, refiérase a "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("clase propia para popover")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("retraso de la aparición cuando "),t("code",{pre:!0},[s._v("trigger")]),s._v(" es hover, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("texto contenido en popover")])]),a("tr",[a("td",[this._v("reference")]),a("td",[this._v("elemento HTML que dispara el popover")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("show")]),t("td",[s._v("se dispara cuando se muestra el popover")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("after-enter")]),t("td",[s._v("se dispara cuando la transicion de entrada termina")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("hide")]),t("td",[s._v("se dispara cuando se oculta el popover")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("after-leave")]),t("td",[s._v("se dispara cuando la transicion de salida termina")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="popover.md";a.default=l.exports},,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){document.querySelector(".source").style.padding="0"})}},r=(t(531),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Usado para la calificación")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate v-model="value2" :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-rate",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),t("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1)]),t("p",[s._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),t("code",[s._v("colors")]),s._v(" y sus dos umbrales pueden ser definidos con "),t("code",[s._v("low-treshold")]),s._v(" y "),t("code",[s._v("high-treshold")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Usa texto para indicar la puntuación")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value3\" :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\" show-text>\n</el-rate>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("p",[s._v("Agregar el atributo "),t("code",[s._v("show-text")]),s._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),t("code",[s._v("texts")]),s._v(". "),t("code",[s._v("texts")]),s._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),t("code",[s._v("max")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":texts")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-text")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Puede utilizar iconos para diferenciar cada componente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value4\" :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\" void-icon-class=\"icon-rate-face-off\" :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("p",[s._v("Puede customizar iconos para tres niveles diferentes usando "),t("code",[s._v("icon-classes")]),s._v(". En este ejemplo también usamos "),t("code",[s._v("void-icon-class")]),s._v(" para asignar un icono si no está seleccionado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":icon-classes")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("void-icon-class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"icon-rate-face-off"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-score text-color="#ff9900" score-template="{value} points">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1),t("p",[s._v("Use el atributo "),t("code",[s._v("disabled")]),s._v(" para hacer el componente de solo lectura. Agregar "),t("code",[s._v("show-score")]),s._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),t("code",[s._v("score-template")]),s._v(" para proveer una plantilla. Tiene que contener "),t("code",[s._v("{value}")]),s._v(", y "),t("code",[s._v("{value}")]),s._v(" será sustituido por la puntuación.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-score")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff9900"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("score-template")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"calificacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calificación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-texto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con texto")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"mas-iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más iconos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"solo-lectura"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Solo lectura")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("puntuación máxima")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("5")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la calificación es de solo lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-half")]),t("td",[s._v("si escoger media estrella está permitido")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("low-threshold")]),t("td",[s._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("high-threshold")]),t("td",[s._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4")])]),t("tr",[t("td",[s._v("colors")]),t("td",[s._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),t("tr",[t("td",[s._v("void-color")]),t("td",[s._v("color para iconos no seleccionados")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C6D1DE")])]),t("tr",[t("td",[s._v("disabled-void-color")]),t("td",[s._v("color para las iconos no seleccionados de solo lectura")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#EFF2F7")])]),t("tr",[t("td",[s._v("icon-classes")]),t("td",[s._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),t("tr",[t("td",[s._v("void-icon-class")]),t("td",[s._v("nombre de clase para iconos no seleccionados")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-off")])]),t("tr",[t("td",[s._v("disabled-void-icon-class")]),t("td",[s._v("nombre de clase para elementos no seleccionados de solo lectura")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-on")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("muestra el texto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-score")]),t("td",[s._v("muestra puntuación actual. "),t("code",{pre:!0},[s._v("show-score")]),s._v(" y "),t("code",{pre:!0},[s._v("show-text")]),s._v(" no pueden ser verdaderos al mismo tiempo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color del texto")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#1F2D3D")])]),t("tr",[t("td",[s._v("texts")]),t("td",[s._v("arreglo de textos")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),t("tr",[t("td",[s._v("score-template")]),t("td",[s._v("plantilla de puntuación")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("{value}")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre del evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("Se dispara cuando la puntuación es cambiada")]),a("td",[this._v("valor luego del cambio")])])])])}],!1,null,null,null);l.options.__file="rate.md";a.default=l.exports},,,,,,,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,a){var t=a.target,e={},r=document;e.left=(r.body.scrollWidth-s)/2,e.top=100,this.imgUrl=t.src,this.imgBound=t.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=a.clientX+"px "+a.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}},r=(t(404),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("div",[e("h2",[s._v("Navegación")]),s._m(0),s._m(1),e("div",{staticClass:"block"},[e("h3",[s._v("Navegación lateral")]),e("el-row",{attrs:{gutter:20}},[e("el-col",{attrs:{span:9}},[e("p",[s._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:15}},[e("img",{attrs:{src:t(198),alt:"Categorías de Nivel 1"},on:{click:function(a){s.enlarge(846,a)}}}),e("h5",[s._v("Categorías de Nivel 1")]),e("p",[s._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),e("img",{attrs:{src:t(199),alt:"Categorías de Nivel 2"},on:{click:function(a){s.enlarge(846,a)}}}),e("h5",[s._v("Categorías de Nivel 2")]),e("p",[s._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),e("img",{attrs:{src:t(200),alt:"Categorías de Nivel 3"},on:{click:function(a){s.enlarge(846,a)}}}),e("h5",[s._v("Categorías de Nivel 3")]),e("p",[s._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),e("div",{staticClass:"block"},[e("h3",[s._v("Navegación superior")]),e("el-row",[e("el-col",{attrs:{span:10}},[e("p",[s._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:14}},[e("img",{attrs:{src:t(201),alt:""},on:{click:function(a){s.enlarge(846,a)}}}),e("p",[s._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),e("transition",{attrs:{name:"fade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(a){s.showDialog=!1}}})]),e("transition",{attrs:{name:"zoom"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(a){s.showDialog=!1}}},[e("div",{staticClass:"imgWrap",style:s.imgStyle},[e("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"block"},[a("p",[this._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"block"},[a("h3",[this._v("Elige la navegación correcta")]),a("p",[this._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],!1,null,"493a1d38",null);l.options.__file="nav.vue";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e=[function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"banner"},[a("div",{staticClass:"banner-desc"},[a("h1",[this._v("Un kit de interfaz de usuario para la web")]),a("p",[this._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"jumbotron"},[a("div",[a("img",{staticClass:"jumbotron-plant-2",attrs:{src:t(186),alt:""}}),a("img",{staticClass:"jumbotron-web",attrs:{src:t(187),alt:""}}),a("img",{staticClass:"jumbotron-plant-1",attrs:{src:t(188),alt:""}}),a("img",{staticClass:"jumbotron-figure-1",attrs:{src:t(189),alt:""}}),a("img",{staticClass:"jumbotron-figure-2",attrs:{src:t(190),alt:""}})]),a("div",{attrs:{"data-hover-layer":"0"}},[a("img",{staticClass:"jumbotron-cloud-1",attrs:{src:t(191),alt:""}}),a("img",{staticClass:"jumbotron-cloud-2",attrs:{src:t(192),alt:""}})]),a("div",{attrs:{"data-hover-layer":"1"}},[a("img",{staticClass:"jumbotron-compo-1",attrs:{src:t(193),alt:""}}),a("img",{staticClass:"jumbotron-compo-2",attrs:{src:t(194),alt:""}}),a("img",{staticClass:"jumbotron-compo-3",attrs:{src:t(195),alt:""}})])])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",[a("p",[this._v("Sponsored by Tipe.io")]),a("p",[this._v("Next Generation API-first CMS")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[a("img",{attrs:{width:"45px",src:t(133),alt:"duohui"}}),a("div",[a("p",[this._v("Sponsored by 多会")]),a("p",[this._v("炫酷的新一代活动票务系统")])])])}],r=t(196),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new r.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},n=(t(403),t(0)),p=Object(n.a)(l,function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("div",[s._m(0),s._m(1),e("div",{staticClass:"sponsors"},[e("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==s.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[e("img",{attrs:{width:"35px",src:t(132),alt:"tipe.io"}}),s._m(2)]),s._m(3)]),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(183),alt:""}}),e("h3",[s._v("Guía")]),e("p",[s._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),e("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[s._v("Ver detalle\n          ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(184),alt:""}}),e("h3",[s._v("Componentes")]),e("p",[s._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),e("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[s._v("Ver detalle\n          ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(185),alt:""}}),e("h3",[s._v("Recursos")]),e("p",[s._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),e("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[s._v("Ver detalle\n          ")])],1)])])])])},e,!1,null,"17a2cb7e",null);p.options.__file="index.vue";a.default=p.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},r=(t(402),t(0)),l=Object(r.a)(e,function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";a.default=l.exports},,function(s,a,t){"use strict";t.r(a);var e=t(73),r=t(63),l=t(29),n=t.n(l),p={data:function(){return{lang:this.$route.meta.lang,navsData:r,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var s=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){s.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var t=s.getAttribute("href");s.href=a+t})}},goAnchor:function(){var s=this;if(location.href.match(/#/g).length>1){var a=location.href.match(/#[^#]+$/g);if(!a)return;var t=document.querySelector(a[0]);if(!t)return;setTimeout(function(a){s.componentScrollBox.scrollTop=t.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var s=this.componentScrollBox.scrollTop;this.showBackToTop=s>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>s&&(this.showHeader=this.scrollTop>s),0===s&&(this.showHeader=!0),this.navFaded||e.a.$emit("fadeNav"),this.scrollTop=s}},created:function(){var s=this;e.a.$on("navFade",function(a){s.navFaded=a}),window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=n()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)}},v=(t(400),t(0)),_=Object(v.a)(p,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[t("div",{staticClass:"page-container page-component"},[t("el-scrollbar",{staticClass:"page-component__nav"},[t("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),t("div",{staticClass:"page-component__content"},[t("router-view",{staticClass:"content"}),t("footer-nav")],1),t("transition",{attrs:{name:"back-top-fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(a){s.hover=!0},mouseleave:function(a){s.hover=!1},click:s.toTop}},[t("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);_.options.__file="component.vue";a.default=_.exports},function(s,a,t){"use strict";t.r(a);var e={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}},r=(t(517),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),s._m(1),t("p",[s._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n\n\n',script:null,style:"\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n")])])])]),s._m(2),t("p",[s._v("Utilizando un botón para activar la lista desplegable.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <el-button type="primary">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  Dropdown List\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        alert('button click');\n      }\n    }\n  }\n",style:"\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("el-button",{attrs:{type:"primary"}},[s._v("\n    Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1),t("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  Dropdown List\n  "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("p",[s._v("Utilice "),t("code",[s._v("split-button")]),s._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n    Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  Dropdown List\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": top;\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" + "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15px")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClick() {\n        alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button click'")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Haga clic en el elemento detonante o sobre él.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover to trigger</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>Action 1</el-dropdown-item>\n        <el-dropdown-item>Action 2</el-dropdown-item>\n        <el-dropdown-item>Action 3</el-dropdown-item>\n        <el-dropdown-item>Action 4</el-dropdown-item>\n        <el-dropdown-item>Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click to trigger</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>Action 1</el-dropdown-item>\n        <el-dropdown-item>Action 2</el-dropdown-item>\n        <el-dropdown-item>Action 3</el-dropdown-item>\n        <el-dropdown-item>Action 4</el-dropdown-item>\n        <el-dropdown-item>Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n\n',script:null,style:"\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"block-col-2"},[t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("click to trigger")]),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("trigger")]),s._v(". Por defecto, es "),t("code",[s._v("hover")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".demonstration")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#8492a6")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),t("code",[s._v("hide-on-click")]),s._v(" como false.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),t("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-arrow-down 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\n\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:"\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{on:{command:s.handleCommand}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),t("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),t("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),t("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),t("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown split-button type="primary">\n  Default\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\n  <el-dropdown-menu slot="dropdown">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n  Default\n  "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n  Medium\n  "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n  Small\n  "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1),t("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n  Mini\n  "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")])],1)],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" o "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n  Default\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n  Medium\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n  Small\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n   "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n   "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n   "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n   "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n  Mini\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"elemento-detonante"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Elemento detonante")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"como-detonar-el-evento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cómo detonar el evento")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"ocultamiento-del-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultamiento del menú")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Use "),a("code",{pre:!0},[this._v("hide-on-click")]),this._v(" para definir si el menú se cierra al hacer clic.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"evento-command"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Evento command")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"dropdown-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de botón de menú, consulte Componente"),t("code",{pre:!0},[s._v("Button")]),s._v(", sólo funciona cuando "),t("code",{pre:!0},[s._v("split-button")]),s._v(" es true.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del menú, también funciona en "),t("code",{pre:!0},[s._v("split-button")])]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("split-button")]),t("td",[s._v("si se visualiza un grupo de botones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("colocación del menú")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),t("td",[s._v("bottom-end")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("cómo detonar")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("hide-on-click")]),t("td",[s._v("si se oculta el menú después de hacer clic en el elemento")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-timeout")]),t("td",[s._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(")")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("250")])]),t("tr",[t("td",[s._v("hide-timeout")]),t("td",[s._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),t("code",{pre:!0},[s._v("hover")]),s._v(")")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("150")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"dropdown-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),t("code",{pre:!0},[s._v("<span>, <button> etc.")]),s._v(") or "),t("code",{pre:!0},[s._v("el-component")]),s._v(", to attach the trigger listener")])]),t("tr",[t("td",[s._v("dropdown")]),t("td",[s._v("content of the Dropdown Menu, usually a "),t("code",{pre:!0},[s._v("<el-dropdown-menu>")]),s._v(" element")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"dropdown-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("si "),t("code",{pre:!0},[s._v("split-button")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(", se activa al hacer clic en el botón izquierdo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("command")]),t("td",[s._v("activa cuando se hace clic en un elemento desplegable")]),t("td",[s._v("el comando enviado desde el elemento desplegable")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("se activa cuando aparece/desaparece el desplegable")]),t("td",[s._v("true cuando aparece, y false de otro modo")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("command")]),t("td",[s._v("un comando que se enviará al "),t("code",{pre:!0},[s._v("command")]),s._v(" callback del Dropdown")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el elemento está desactivado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("divided")]),t("td",[s._v("si se visualiza un divisor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);l.options.__file="dropdown.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],r=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],l=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],n=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],p=1e3,v=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={label:"name",children:"zones",isLeaf:"leaf"},o={children:"children",label:"label"},h={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,a,t){console.log(s,a,t)},handleNodeClick:function(s){console.log(s)},handleDragStart:function(s,a){console.log("drag start",s)},handleDragEnter:function(s,a,t){console.log("tree drag enter: ",a.label)},handleDragLeave:function(s,a,t){console.log("tree drag leave: ",a.label)},handleDragOver:function(s,a,t){console.log("tree drag over: ",a.label)},handleDragEnd:function(s,a,t,e){console.log("tree drag end: ",a&&a.label,t)},handleDrop:function(s,a,t,e){console.log("tree drop: ",a.label,t)},allowDrop:function(s,a,t){return"Level two 3-1"!==a.data.label||"inner"!==t},allowDrag:function(s){return-1===s.data.label.indexOf("Level three 3-1-1")},loadNode:function(s,a){return 0===s.level?a([{name:"Root1"},{name:"Root2"}]):s.level>3?a([]):(t="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,void setTimeout(function(){var s=void 0;s=t?[{name:"zone"+_++},{name:"zone"+_++}]:[],a(s)},500));var t},loadNode1:function(s,a){return 0===s.level?a([{name:"region"}]):s.level>1?a([]):void setTimeout(function(){a([{name:"leaf",leaf:!0},{name:"zone"}])},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s){var a={id:p++,label:"testtest",children:[]};s.children||this.$set(s,"children",[]),s.children.push(a)},remove:function(s,a){var t=s.parent,e=t.data.children||t.data,r=e.findIndex(function(s){return s.id===a.id});e.splice(r,1)},renderContent:function(s,a){var t=this,e=a.node,r=a.data;a.store;return s("span",{class:"custom-tree-node"},[s("span",[e.label]),s("span",[s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return t.append(r)}}},["Append"]),s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return t.remove(e,r)}}},["Delete"])])])},filterNode:function(s,a){return!s||-1!==a.label.indexOf(s)}},data:function(){return{data:e,data2:r,data3:l,data4:JSON.parse(JSON.stringify(r)),data5:JSON.parse(JSON.stringify(r)),data6:n,regions:v,defaultProps:o,props:c,props1:i,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}},d=(t(542),t(0)),u=Object(d.a)(h,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra un conjunto de datos jerárquicos.")]),s._m(1),t("p",[s._v("Estructura básica de árbol.")]),t("demo-block",{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: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Usado para la selección de nodos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :props="props" :load="loadNode" lazy="" show-checkbox @check-change="handleCheckChange">\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),t("p",[s._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loadNode"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v("\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("count")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Root1'")]),s._v(" }, { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Root2'")]),s._v(" }]);\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" hasChild;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(") {\n          hasChild = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(") {\n          hasChild = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          hasChild = "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" data;\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n            }];\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :props="props1" :load="loadNode1" lazy="" show-checkbox>\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        props1: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode1(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),t("p",[s._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props1"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loadNode1"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props1")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isLeaf")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v("\n        },\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      loadNode1(node, resolve) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region'")]),s._v(" }]);\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("leaf")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v("\n          }];\n\n          resolve(data);\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("El checkbox de un nodo se puede poner como desactivado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data3" :props="defaultProps" show-checkbox @check-change="handleCheckChange">\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data3: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),t("p",[s._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-2'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-2'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disabled'")]),s._v(",\n        },\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),t("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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),t("p",[s._v("Utilice "),t("code",[s._v("default-expanded-keys")]),s._v(" y "),t("code",[s._v("default-checked-keys")]),s._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),t("code",[s._v("node-key")]),s._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox="" default-expand-all="" node-key="id" ref="tree" highlight-current :props="defaultProps">\n</el-tree>\n\n<div class="buttons">\n  <el-button @click="getCheckedNodes">get by node</el-button>\n  <el-button @click="getCheckedKeys">get by key</el-button>\n  <el-button @click="setCheckedNodes">set by node</el-button>\n  <el-button @click="setCheckedKeys">set by key</el-button>\n  <el-button @click="resetChecked">reset</el-button>\n</div>\n\n\n',script:"\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),t("div",{staticClass:"buttons"},[t("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),t("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),t("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),t("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),t("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),t("p",[s._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),t("code",[s._v("node-key")]),s._v(" es necesario.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tree"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("highlight-current")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="custom-tree-container">\n  <div class="block">\n    <p>Using render-content</p>\n    <el-tree :data="data4" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Using scoped slot</p>\n    <el-tree :data="data5" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button type="text" size="mini" @click="() => append(data)">\n            Append\n          </el-button>\n          <el-button type="text" size="mini" @click="() => remove(node, data)">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n\n\n\n',script:"\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\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      return {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: 'testtest', children: [] };\n        if (!data.children) {\n          this.$set(data, 'children', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class=\"custom-tree-node\">\n            <span>{node.label}</span>\n            <span>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:"\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"custom-tree-container"},[t("div",{staticClass:"block"},[t("p",[s._v("Using render-content")]),t("el-tree",{attrs:{data:s.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),t("div",{staticClass:"block"},[t("p",[s._v("Using scoped slot")]),t("el-tree",{attrs:{data:s.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:s._u([{key:"default",fn:function(a){var e=a.node,r=a.data;return t("span",{staticClass:"custom-tree-node"},[t("span",[s._v(s._s(e.label))]),t("span",[t("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.append(r)}}},[s._v("\n            Append\n          ")]),t("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.remove(e,r)}}},[s._v("\n            Delete\n          ")])],1)])}}])})],1)])]),t("p",[s._v("Hay dos maneras de personalizar la plantilla para los nodos de árbol: "),t("code",[s._v("render-content")]),s._v(" y scoped slot. Utilice "),t("code",[s._v("render-content")]),s._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los "),t("code",[s._v("nodos")]),s._v(" y "),t("code",[s._v("datos")]),s._v(" en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),t("code",[s._v("render-content")]),s._v(" funcionará si las dependencias relevantes están configuradas correctamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"custom-tree-container"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using render-content"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"renderContent"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Using scoped slot"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data5"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"custom-tree-node"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ node, data }"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ node.label }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"() => append(data)"')]),s._v(">")]),s._v("\n            Append\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"() => remove(node, data)"')]),s._v(">")]),s._v("\n            Delete\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"actionscript"}},[s._v("\n  let id = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(";\n\n  export "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n        id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n        label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n        children: [{\n          id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n          label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n          children: [{\n            id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n            label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n          }, {\n            id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n            label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n          }]\n        }]\n      }, {\n        id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n        label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n        children: [{\n          id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n          label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n        }, {\n          id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n          label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n        }]\n      }, {\n        id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n        label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n        children: [{\n          id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n          label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n        }, {\n          id: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n          label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n        }]\n      }];\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        data4: JSON.parse(JSON.stringify(data)),\n        data5: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" newChild = { id: id++, label: "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'testtest'")]),s._v(", children: [] };\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!data.children) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("set")]),s._v("(data, "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(", []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" parent = node.parent;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" children = parent.data.children || parent.data;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" index = children.findIndex(d => d.id === data.id);\n        children.splice(index, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (\n          <span "),t("span",{pre:!0,attrs:{class:"hljs-class"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("class")]),s._v('="'),t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("custom")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("tree")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("node")]),s._v('">\n            <'),t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("span")]),s._v(">")]),s._v("{node.label}</span>\n            <span>\n              <el-button size="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" type="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" on-click={ () => "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(data) }>Append</el-button>\n              <el-button size="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" type="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" on-click={ () => "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".custom-tree-node")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("flex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": space-between;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Los nodos del árbol se pueden filtrar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Filter keyword" v-model="filterText">\n</el-input>\n\n<el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2">\n</el-tree>\n\n\n',script:"\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(a){s.filterText=a},expression:"filterText"}}),t("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),t("p",[s._v("Invoque el método "),t("code",[s._v("filter")]),s._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),t("code",[s._v("filter-node-method")]),s._v(", y su valor el método de filtrado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Filter keyword"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filter-tree"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-node-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterNode"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterText")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data6" node-key="id" default-expand-all="" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">\n</el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data6: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tree",{attrs:{data:s.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":s.allowDrop,"allow-drag":s.allowDrag},on:{"node-drag-start":s.handleDragStart,"node-drag-enter":s.handleDragEnter,"node-drag-leave":s.handleDragLeave,"node-drag-over":s.handleDragOver,"node-drag-end":s.handleDragEnd,"node-drop":s.handleDrop}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data6"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-start")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragStart"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-enter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragEnter"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-leave")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragLeave"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-over")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragOver"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-end")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragEnd"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDrop"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("draggable")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":allow-drop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"allowDrop"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":allow-drag")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"allowDrag"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data6")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleDragStart(node, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'drag start'")]),s._v(", node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag enter: '")]),s._v(", dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag leave: '")]),s._v(", dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag over: '")]),s._v(", dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag end: '")]),s._v(", dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drop: '")]),s._v(", dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (dropNode.data.label === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" type !== "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'inner'")]),s._v(";\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n        }\n      },\n      allowDrag(draggingNode) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" draggingNode.data.label.indexOf("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v(") === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccionable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nodos hoja en modo perezoso")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"checkbox-desactivados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox desactivados")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplegado o seleccionado por defecto")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccionando-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionando nodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido personalizado en los nodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"filtrado-de-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de nodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"acordeon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"draggable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),a("code",{pre:!0},[this._v("draggable")]),this._v(" .")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Datos del árbol")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("Texto a mostrar cuando data es void")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("node-key")]),t("td",[s._v("Identificador único en todo el árbol para los nodos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("Opciones de configuración")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-after-expand")]),t("td",[s._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("load")]),t("td",[s._v("Método para cargar los datos de subárboles")]),t("td",[s._v("function(node, resolve)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("Función de renderizado para los nodos")]),t("td",[s._v("Function(h, { node, data, store }")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("highlight-current")]),t("td",[s._v("Si el nodo actual está resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("Expandir todos los nodos por defecto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-on-click-node")]),t("td",[s._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("check-on-click-node")]),t("td",[s._v("si marcar o desmarcar el nodo al hacer clic en el. Si es "),t("code",{pre:!0},[s._v("false")]),s._v(", el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("auto-expand-parent")]),t("td",[s._v("Expandir un nodo padre si el hijo está seleccionado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("default-expanded-keys")]),t("td",[s._v("Array de claves de los nodos expandidos inicialmente")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-checkbox")]),t("td",[s._v("Si un nodo es seleccionable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("check-strictly")]),t("td",[s._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-checked-keys")]),t("td",[s._v("Array con claves de los nodos seleccionados inicialmente")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("current-node-key")]),t("td",[s._v("key of initially selected node")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-node-method")]),t("td",[s._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" el nodo se oculta")]),t("td",[s._v("Function(value, data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indent")]),t("td",[s._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("16")])]),t("tr",[t("td",[s._v("icon-class")]),t("td",[s._v("Icono del nodo del árbol de cliente")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("lazy")]),t("td",[s._v("si se trata de un nodo de hoja lazy load, utilizado con el atributo "),t("code",{pre:!0},[s._v("load")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("draggable")]),t("td",[s._v("si se habilita la función de drag and drop en los nodos")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-drag")]),t("td",[s._v("esta función se ejecutará antes de arrastrar un nodo. si devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(", el nodo no puede ser arrastrado.")]),t("td",[s._v("Function(nodo)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("allow-drop")]),t("td",[s._v("esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. "),t("code",{pre:!0},[s._v("type")]),s._v(" tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)")]),t("td",[s._v("Function(Nodoquesearrastra, Nododestino, type)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("Especifica que clave del objecto nodo se utilizará como label")]),t("td",[s._v("string, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("Especifica que objeto del nodo se utiliza como subárbol")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("isLeaf")]),t("td",[s._v("Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado")]),t("td",[s._v("boolean, function(datos, nodo)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("Tree")]),this._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Método")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("filter")]),t("td",[s._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),t("td",[s._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),t("tr",[t("td",[s._v("updateKeyChildren")]),t("td",[s._v("Asocia un nuevo dato al nodo, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),t("tr",[t("td",[s._v("getCheckedNodes")]),t("td",[s._v("si el nodo puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve el array de nodos actualmente seleccionada.")]),t("td",[s._v("(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(". Si el parámetro es "),t("code",{pre:!0},[s._v("true")]),s._v(", sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(". Si el parámetro es "),t("code",{pre:!0},[s._v("true")]),s._v(", el valor de retorno contiene nodos halfchecked.")])]),t("tr",[t("td",[s._v("setCheckedNodes")]),t("td",[s._v("Establece algunos nodos como seleccionados, solo funciona cuando "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("Un array de nodos a seleccionar")])]),t("tr",[t("td",[s._v("getCheckedKeys")]),t("td",[s._v("Si los nodos pueden ser seleccionados ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve un array con las claves de los nodos seleccionados")]),t("td",[s._v("(leafOnly) Acepta un booleano que por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(".")])]),t("tr",[t("td",[s._v("setCheckedKeys")]),t("td",[s._v("Establece algunos nodos como seleccionados, solo si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),t("code",{pre:!0},[s._v("false")]),s._v(". Si el parámetro es "),t("code",{pre:!0},[s._v("true")]),s._v(", solo devuelve los nodos seleccionados")])]),t("tr",[t("td",[s._v("setChecked")]),t("td",[s._v("Establece si un nodo está seleccionado, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" esta asignado")]),t("td",[s._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),t("tr",[t("td",[s._v("getHalfCheckedNodes")]),t("td",[s._v("Si el nodo puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve la mitad del array de nodos actualmente seleccionada.")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("getHalfCheckedKeys")]),t("td",[s._v("Si el nodo puede ser seleccionado ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v("), devuelve la mitad del array de claves del nodo actualmente seleccionado.")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("getCurrentKey")]),t("td",[s._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("getCurrentNode")]),t("td",[s._v("return the highlight node's data (null if no node is highlighted)")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("setCurrentKey")]),t("td",[s._v("establece el nodo resaltado por la clave, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(key) la clave del nodo a ser resaltado. If "),t("code",{pre:!0},[s._v("null")]),s._v(", cancel the currently highlighted node")])]),t("tr",[t("td",[s._v("setCurrentNode")]),t("td",[s._v("establece el nodo resaltado, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(node) nodo a ser resaltado")])]),t("tr",[t("td",[s._v("getNode")]),t("td",[s._v("devuelve el nodo por el dato o la clave")]),t("td",[s._v("(data) los datos o clave del nodo")])]),t("tr",[t("td",[s._v("remove")]),t("td",[s._v("elimina un nodo, solo funciona si "),t("code",{pre:!0},[s._v("node-key")]),s._v(" está asignado")]),t("td",[s._v("(data) los datos del nodo o nodo a borrar")])]),t("tr",[t("td",[s._v("append")]),t("td",[s._v("añadir un nodo hijo a un nodo determinado del árbol")]),t("td",[s._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),t("tr",[t("td",[s._v("insertBefore")]),t("td",[s._v("insertar un nodo antes de un nodo dado en el árbol")]),t("td",[s._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),t("tr",[t("td",[s._v("insertAfter")]),t("td",[s._v("insertar un nodo después de un nodo dado en el árbol")]),t("td",[s._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("node-click")]),t("td",[s._v("se lanza cuando un nodo es pinchado")]),t("td",[s._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])]),t("tr",[t("td",[s._v("node-contextmenu")]),t("td",[s._v("se lanza cuando en un nodo se hace click con el boton derecho")]),t("td",[s._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),t("code",{pre:!0},[s._v("node")]),s._v("  del TreeNode, el TreeNode en si mismo")])]),t("tr",[t("td",[s._v("check-change")]),t("td",[s._v("se lanza cuando el estado de selección del nodo cambia")]),t("td",[s._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),t("tr",[t("td",[s._v("check")]),t("td",[s._v("se activa al hacer clic en la casilla de selección de un nodo")]),t("td",[s._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("cambia cuando el nodo actual cambia")]),t("td",[s._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" del TreeNode")])]),t("tr",[t("td",[s._v("node-expand")]),t("td",[s._v("se lanza cuando el nodo actual se abre")]),t("td",[s._v("tres parámetros: el objeto del nodo abierto, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])]),t("tr",[t("td",[s._v("node-collapse")]),t("td",[s._v("se lanza cuando el nodo actual se cierra")]),t("td",[s._v("tres parámetros: el objeto del nodo cerrado, propiedad "),t("code",{pre:!0},[s._v("node")]),s._v(" de TreeNode y el TreeNode en si")])]),t("tr",[t("td",[s._v("node-drag-start")]),t("td",[s._v("se activa cuando se inicia el arrastre")]),t("td",[s._v("dos parametros: el objeto del nodo que se arrastrara, evento.")])]),t("tr",[t("td",[s._v("node-drag-enter")]),t("td",[s._v("se desencadena cuando el nodo de arrastre entra en otro nodo")]),t("td",[s._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.")])]),t("tr",[t("td",[s._v("node-drag-leave")]),t("td",[s._v("se desencadena cuando el nodo de arrastre sale de un nodo")]),t("td",[s._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.")])]),t("tr",[t("td",[s._v("node-drag-over")]),t("td",[s._v("se activa cuando se arrastra sobre un nodo (como el evento mouseover)")]),t("td",[s._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.")])]),t("tr",[t("td",[s._v("node-drag-end")]),t("td",[s._v("se activa cuando se termina de arrastrar")]),t("td",[s._v("cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser "),t("code",{pre:!0},[s._v("undefined")]),s._v(" ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])]),t("tr",[t("td",[s._v("node-drop")]),t("td",[s._v("después de soltar el nodo de arrastre")]),t("td",[s._v("cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null);u.options.__file="tree.md";a.default=u.exports},function(s,a,t){"use strict";t.r(a);var e={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:[],value11:[],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 a=this;""!==s?(this.loading=!0,setTimeout(function(){a.loading=!1,a.options4=a.list.filter(function(a){return a.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}},r=(t(532),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),s._m(1),t("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" :key="item.value" :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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(a){s.value=a},expression:"value"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[t("code",[s._v("v-model")]),s._v(" es el valor de  "),t("code",[s._v("el-option")]),s._v(" que está seleccionado actualmente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value2" placeholder="Select">\n    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options2: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value2: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}},s._l(s.options2,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}),1)]],2),t("p",[s._v("Establezca el valor de "),t("code",[s._v("disabled")]),s._v(" en "),t("code",[s._v("el-option")]),s._v("  como "),t("code",[s._v("true")]),s._v(" para deshabilitar esta opción.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Desactivar todo el componente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value3" disabled placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :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        value3: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Configure "),t("code",[s._v("disabled")]),s._v(" de "),t("code",[s._v("el-select")]),s._v(" para deshabilitarla.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede limpiar un Select con un icono.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value4" clearable placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :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        value4: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("clearable")]),s._v(" para "),t("code",[s._v("el-select")]),s._v("  y aparecerá un icono. Tenga en cuenta que la opción "),t("code",[s._v("clearable")]),s._v(" es sólo para una selección individual.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select v-model="value11" multiple collapse-tags style="margin-left: 20px;" placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :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        value5: []\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1),t("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:s.value11,callback:function(a){s.value11=a},expression:"value11"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("multiple")]),s._v(" para "),t("code",[s._v("el-select")]),s._v(" para habilitar el modo múltiple. En este caso, el valor del "),t("code",[s._v("v-model")]),s._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  "),t("code",[s._v("collapse-tags")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("collapse-tags")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 20px;"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Puede personalizar templates HTML para las opciones.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value6" placeholder="Select">\n    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">\n      <span style="float: left">{{ item.label }}</span>\n      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value6: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}},s._l(s.cities,function(a){return t("el-option",{key:a.value,attrs:{label:a.label,value:a.value}},[t("span",{staticStyle:{float:"left"}},[s._v(s._s(a.label))]),t("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(a.value))])])}),1)]],2),t("p",[s._v("Inserte templates HTML personalizados en el slot de "),t("code",[s._v("el-option")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in cities"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: left"')]),s._v(">")]),s._v("{{ item.label }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),s._v("{{ item.value }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Mostrar opciones en grupos.")]),t("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" :key="group.label" :label="group.label">\n      <el-option v-for="item in group.options" :key="item.value" :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 {\n    data() {\n      return {\n        options3: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}},s._l(s.options3,function(a){return t("el-option-group",{key:a.label,attrs:{label:a.label}},s._l(a.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)}),1)]],2),t("p",[s._v("Utilice "),t("code",[s._v("el-option-group")]),s._v(" para agrupar las opciones, y su atributo "),t("code",[s._v("label")]),s._v(" representa el nombre del grupo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group in options3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in group.options"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popular cities'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'City name'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Puede filtrar opciones como lo desee.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value8" filterable placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :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        value8: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Añadir "),t("code",[s._v("filterable")]),s._v(" a "),t("code",[s._v("el-select")]),s._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),t("code",[s._v("label")]),s._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),t("code",[s._v("filter-method")]),s._v(". "),t("code",[s._v("filter-method")]),s._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Introduzca palabras y datos para buscar desde el servidor.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value9" multiple filterable="" remote="" reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">\n    <el-option v-for="item in options4" :key="item.value" :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        options4: [],\n        value9: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options4 = [];\n        }\n      }\n    }\n  }\n',style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}},s._l(s.options4,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Configure el valor de "),t("code",[s._v("filterable")]),s._v(" y "),t("code",[s._v("remote")]),s._v(" con "),t("code",[s._v("true")]),s._v(" para habilitar la búsqueda remota, y debería pasar el método "),t("code",[s._v("remote-method")]),s._v(". "),t("code",[s._v("remote-method")]),s._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),t("code",[s._v("el-option")]),s._v(" se presenta con la directiva "),t("code",[s._v("v-for")]),s._v(", debe agregar el atributo "),t("code",[s._v("key")]),s._v(" para "),t("code",[s._v("el-option")]),s._v(". Su valor tiene que ser unívoco, como el valor de "),t("code",[s._v("item.value")]),s._v(" en el ejemplo siguiente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("remote")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("reserve-keyword")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please enter a keyword"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":remote-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"remoteMethod"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options4")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("states")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Alabama"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Alaska"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arizona"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arkansas"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"California"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Colorado"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Connecticut"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Delaware"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Florida"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Georgia"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Hawaii"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Idaho"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Illinois"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Indiana"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Iowa"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Kansas"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Kentucky"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Louisiana"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Maine"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Maryland"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Massachusetts"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Michigan"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Minnesota"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Mississippi"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Missouri"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Montana"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nebraska"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nevada"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Hampshire"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Jersey"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Mexico"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"North Carolina"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"North Dakota"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ohio"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Oklahoma"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Oregon"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pennsylvania"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Rhode Island"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"South Carolina"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"South Dakota"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Tennessee"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Texas"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Utah"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Vermont"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Virginia"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"West Virginia"')]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Wisconsin"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".states.map("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": item, "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (query !== "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n          setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list.filter("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n            });\n          }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200")]),s._v(");\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value10" multiple filterable="" allow-create placeholder="Choose tags for your article">\n    <el-option v-for="item in options5" :key="item.value" :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        options5: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value10: []\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}},s._l(s.options5,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],2),t("p",[s._v("Al utilizar el atributo "),t("code",[s._v("allow-create")]),s._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),t("code",[s._v("allow-create")]),s._v(" funcione, "),t("code",[s._v("filterable")]),s._v(" debe ser "),t("code",[s._v("true")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("allow-create")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options5"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options5")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disabled-en-el-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-option")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disabled-en-el-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-select")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"select-simple-limpiable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select simple limpiable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccion-multiple-basica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección múltiple básica")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizar-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizar template")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"agrupando"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"filtrado-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de opciones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"busqueda-remota"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"crear-nuevos-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Crear nuevos items")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),a("code",{pre:!0},[this._v("value-key")]),this._v(" como el nombre único de la clave de identidad.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"select-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("si multiple-select esta activo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Select esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("collapse-tags")]),t("td",[s._v("si se colapsan los tags a un texto cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("whether select can be cleared")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("multiple-limit")]),t("td",[s._v("maximo numero de opciones que el usuario puede seleccionar cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(".  Sin límite cuando se fija a 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("el atributo "),t("code",{pre:!0},[s._v("name")]),s._v(" del input seleccionado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autocomplete")]),t("td",[s._v("el atributo "),t("code",{pre:!0},[s._v("autocomplete")]),s._v(" del input seleccionado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("auto-complete")]),t("td",[s._v("@DEPRECATED in next major version")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("si Select es filtrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-create")]),t("td",[s._v("si esta permitido crear nuevos items. Para usar esto, "),t("code",{pre:!0},[s._v("filterable")]),s._v(" debe ser "),t("code",{pre:!0},[s._v("true")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("metodo de filtrado personalizado")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("remote")]),t("td",[s._v("si las opciones se traeran desde el servidor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("remote-method")]),t("td",[s._v("metodo de busqueda remota personalizada")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("si Select está cargando datos del servidor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading-text")]),t("td",[s._v("texto mostrado durante la carga de datos del servidor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Loading")])]),t("tr",[t("td",[s._v("no-match-text")]),t("td",[s._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No matching data")])]),t("tr",[t("td",[s._v("no-data-text")]),t("td",[s._v("texto mostrado cuando no hay opciones")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No data")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizado para el menú desplegable del Select")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("reserve-keyword")]),t("td",[s._v("cuando "),t("code",{pre:!0},[s._v("multiple")]),s._v(" y "),t("code",{pre:!0},[s._v("filter")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-first-option")]),t("td",[s._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),t("code",{pre:!0},[s._v("filterable")]),s._v(" o "),t("code",{pre:!0},[s._v("remote")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-append-to-body")]),t("td",[s._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),t("code",{pre:!0},[s._v("prop")]),s._v(" en "),t("code",{pre:!0},[s._v("false")]),s._v(".")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("automatic-dropdown")]),t("td",[s._v("para non-filterable Select, este "),t("code",{pre:!0},[s._v("prop")]),s._v(" decide si el menú de opciones aparece cuando la entrada está enfocada")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Select")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor del select cambia")]),t("td",[s._v("valor actual del select")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("se dispara cuando el menu desplegable aparece o desaparece")]),t("td",[s._v("true cuando aparece, y false en otro caso")])]),t("tr",[t("td",[s._v("remove-tag")]),t("td",[s._v("se dispara cuando un tag es removido en modo multiple")]),t("td",[s._v("el valor del tag removido")])]),t("tr",[t("td",[s._v("clear")]),t("td",[s._v("se dispara cuando el icono se clickea en un Select limpiable")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando el input pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando el input obtiene el foco")]),t("td",[s._v("(event: Event)")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"select-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("lista de los componentes Option")])]),a("tr",[a("td",[this._v("prefix")]),a("td",[this._v("contenido prefix de un  Select")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos del grupo de opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("nombre del grupo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si se deshabilitan todas las opciones del grupo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor de option")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta de option, es igual a  "),t("code",{pre:!0},[s._v("value")]),s._v(" si se omite")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si  option esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Foco en el componente input")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("Quita el focus del componente y oculta el dropdown")]),t("td",[s._v("-")])])])])}],!1,null,null,null);l.options.__file="select.md";a.default=l.exports},,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}},r=(t(533),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Desliza el slider dentro de un rango fijo.")]),s._m(1),t("p",[s._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default value</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Customized initial value</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Hide Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Format Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Disabled</span>\n    <el-slider v-model="value5" 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: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default value")]),t("el-slider",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),t("el-slider",{model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),t("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),t("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Disabled")]),t("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)]],2),t("p",[s._v("Personalice el valor inicial del slider configurando el valor vinculado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-tooltip")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format-tooltip")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatTooltip"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("36")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("48")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("42")]),s._v("\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val / "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Las opciones pueden ser discretas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Breakpoints not displayed</span>\n    <el-slider v-model="value6" :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Breakpoints displayed</span>\n    <el-slider v-model="value7" :step="10" show-stops>\n    </el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value6: 0,\n        value7: 0\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),t("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),t("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("p",[s._v("Configure el tamaño del paso con el atributo "),t("code",[s._v("step")]),s._v(". Puede visualizar los puntos de ruptura configurando el atributo "),t("code",[s._v("show-stops")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Inserte el valor a traves de un input")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <el-slider v-model="value8" show-input>\n    </el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}})],1)]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("show-input")]),s._v(" para que muestre un input a la derecha.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-input")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Se soporta la selección de un rango de valores.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <el-slider v-model="value9" range="" show-stops :max="10">\n    </el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}})],1)]],2),t("p",[s._v("El ajuste del atributo "),t("code",[s._v("range")]),s._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <el-slider v-model="value10" vertical height="200px">\n    </el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value10: 0\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}})],1)]],2),t("p",[s._v("El ajuste del atributo "),t("code",[s._v("vertical")]),s._v(" a "),t("code",[s._v("true")]),s._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),t("code",[s._v("height")]),s._v(" .")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("vertical")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"valores-discretos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valores discretos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slider-con-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider con input")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccion-de-rangos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccion de rangos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"modo-vertical"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Vertical")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("valor minimo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("valor máximo")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("100")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Slider esta deshabitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("tamaño del paso")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("show-input")]),t("td",[s._v("Si se muestra el input, trabaja cuando"),t("code",{pre:!0},[s._v("range")]),s._v("es false")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-input-controls")]),t("td",[s._v("si se muestran los botones de control cuando"),t("code",{pre:!0},[s._v("show-input")]),s._v("es true")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("input-size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("large / medium / small / mini")]),t("td",[s._v("small")])]),t("tr",[t("td",[s._v("show-stops")]),t("td",[s._v("si se muestran los puntos de ruptura (breakpoints)")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-tooltip")]),t("td",[s._v("si se muestra el valor en un tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("format-tooltip")]),t("td",[s._v("formato para mostrar el valor del tooltip")]),t("td",[s._v("function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("range")]),t("td",[s._v("si se usaran un rango")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("vertical")]),t("td",[s._v("modo vertical")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("alto del Slider, requerido en modo vertical")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta para screen reader")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir, en milisegundos, funciona cuando"),t("code",{pre:!0},[s._v("show-input")]),s._v(" es true.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("tooltip-class")]),t("td",[s._v("nombre personalizado de clase para el tooltip")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),a("td",[this._v("valor despues del cambio")])])])])}],!1,null,null,null);l.options.__file="slider.md";a.default=l.exports},,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(a){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}},r=(t(536),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Se utiliza para marcar y seleccionar.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tag",[s._v("Tag One")]),t("el-tag",{attrs:{type:"success"}},[s._v("Tag Two")]),t("el-tag",{attrs:{type:"info"}},[s._v("Tag Three")]),t("el-tag",{attrs:{type:"warning"}},[s._v("Tag Four")]),t("el-tag",{attrs:{type:"danger"}},[s._v("Tag Five")])],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("type")]),s._v(" para definir el tipo de etiqueta. Además, el atributo "),t("code",[s._v("color")]),s._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Tag Two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Tag Three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Tag Four"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Tag Five"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">\n  {{tag.name}}\n</el-tag>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(a){return t("el-tag",{key:a.name,attrs:{closable:"",type:a.type}},[s._v("\n  "+s._s(a.name)+"\n")])}),1),t("p",[s._v("el atributo "),t("code",[s._v("closable")]),s._v(" puede usarse para definir una etiqueta removible. Acepta un "),t("code",[s._v("Boolean")]),s._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),t("code",[s._v("disable-transitions")]),s._v(" , que acepta "),t("code",[s._v("Boolean")]),s._v(", como "),t("code",[s._v("true")]),s._v(". Se dispara el evento "),t("code",[s._v("close")]),s._v(" cuando la etiqueta es removida.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag in tags"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag.name"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag.type"')]),s._v(">")]),s._v("\n  {{tag.name}}\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tags")]),s._v(": [\n          { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 4'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(" },\n          { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 5'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="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\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\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:"\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(a){return t("el-tag",{key:a,attrs:{closable:"","disable-transitions":!1},on:{close:function(t){s.handleClose(a)}}},[s._v("\n  "+s._s(a)+"\n")])}),s.inputVisible?t("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(a){return"button"in a||!s._k(a.keyCode,"enter",13,a.key,"Enter")?s.handleInputConfirm(a):null}},model:{value:s.inputValue,callback:function(a){s.inputValue=a},expression:"inputValue"}}):t("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag in dynamicTags"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disable-transitions")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n  {{tag}}\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input-new-tag"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inputVisible"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inputValue"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"saveTagInput"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@keyup.enter.native")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@blur")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"button-new-tag"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" + "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".button-new-tag")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("32px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-top")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".input-new-tag")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": bottom;\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dynamicTags")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.splice("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" inputValue = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (inputValue) {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tag",[s._v("Default")]),t("el-tag",{attrs:{size:"medium"}},[s._v("Medium")]),t("el-tag",{attrs:{size:"small"}},[s._v("Small")]),t("el-tag",{attrs:{size:"mini"}},[s._v("Mini")])],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("size")]),s._v(" para establecer tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" o "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"etiqueta-removible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Etiqueta removible")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"editar-dinamicamente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Editar dinámicamente")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Puede utilizar el evento "),a("code",{pre:!0},[this._v("close")]),this._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tema")]),t("td",[s._v("string")]),t("td",[s._v("success/info/warning/danger")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si el Tag puede ser removido")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disable-transitions")]),t("td",[s._v("si se deshabilitan las animaciones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hit")]),t("td",[s._v("si el  Tag tiene un borde resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color")]),t("td",[s._v("color de fondo del Tag")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Tag")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("se disoara cuando el Tag es clic")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("se disoara cuando el Tag es removido")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="tag.md";a.default=l.exports},,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},r=(t(510),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),s._m(1),s._m(2),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n  <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width="200px">Barra lateral</el-aside>\n    <el-container>\n      <el-main>Principal</el-main>\n      <el-footer>Pie de página</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n    <el-footer>Pie de página</el-footer>\n  </el-container>\n</el-container>\n\n\n',script:null,style:"\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")])],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-main",[s._v("Principal")])],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-main",[s._v("Principal")])],1)],1),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1)],1)],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")])],1)],1),t("el-container",[t("el-aside",{attrs:{width:"200px"}},[s._v("Barra lateral")]),t("el-container",[t("el-header",[s._v("Cabecera")]),t("el-main",[s._v("Principal")]),t("el-footer",[s._v("Pie de página")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Barra lateral"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Cabecera"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Principal"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Pie de página"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-footer")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#D3DCE6")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-main")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#E9EEF3")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("160px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" > "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(5)")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(6)")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("260px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(7)")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("320px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      const item = {\n        date: '2016-05-02',\n        name: 'Tom',\n        address: 'No. 189, Grove St, Los Angeles'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n",style:"\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[t("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[t("el-menu",{attrs:{"default-openeds":["1","3"]}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),t("el-menu-item-group",[t("template",{slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"1-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"1-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"1-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},[s._v("Option4")]),t("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("Option 4-1")])],2)],2),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),t("el-menu-item-group",[t("template",{slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"2-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"2-4"}},[t("template",{slot:"title"},[s._v("Option 4")]),t("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("Option 4-1")])],2)],2),t("el-submenu",{attrs:{index:"3"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")]),t("el-menu-item-group",[t("template",{slot:"title"},[s._v("Group 1")]),t("el-menu-item",{attrs:{index:"3-1"}},[s._v("Option 1")]),t("el-menu-item",{attrs:{index:"3-2"}},[s._v("Option 2")])],2),t("el-menu-item-group",{attrs:{title:"Group 2"}},[t("el-menu-item",{attrs:{index:"3-3"}},[s._v("Option 3")])],1),t("el-submenu",{attrs:{index:"3-4"}},[t("template",{slot:"title"},[s._v("Option 4")]),t("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("Option 4-1")])],2)],2)],1)],1),t("el-container",[t("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[t("el-dropdown",[t("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("View")]),t("el-dropdown-item",[s._v("Add")]),t("el-dropdown-item",[s._v("Delete")])],1)],1),t("span",[s._v("Tom")])],1),t("el-main",[t("el-table",{attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-openeds")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("Navigator One"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("Option 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("Option 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("Option 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("Option 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("Option 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("Option 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-1"')]),s._v(">")]),s._v("Option 1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-2"')]),s._v(">")]),s._v("Option 2"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-3"')]),s._v(">")]),s._v("Option 3"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-4"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-4-1"')]),s._v(">")]),s._v("Option 4-1"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(">")]),s._v("\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-right: 15px"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("View"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Add"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Delete"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Tom"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("\n    \n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"140"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n  }\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item = {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n      };\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20")]),s._v(").fill(item)\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenedor")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("<el-container>")]),this._v(": Contenedor. Cuando este elemento se anida con un "),a("code",{pre:!0},[this._v("<el-header>")]),this._v(" o "),a("code",{pre:!0},[this._v("<el-footer>")]),this._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("<el-header>")]),this._v(": Contenedor para cabeceras.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("<el-aside>")]),this._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("<el-main>")]),this._v(": Contenedor para sección principal.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("<el-footer>")]),this._v(": Contenedor para pie de página.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),a("code",{pre:!0},[this._v("<el-container>")]),this._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),a("code",{pre:!0},[this._v("<el-container>")]),this._v(".")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disenos-comunes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diseños comunes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"ejemplo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ejemplo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de contenedor")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("direction")]),t("td",[s._v("dirección de diseño para elementos secundarios")]),t("td",[s._v("string")]),t("td",[s._v("horizontal / vertical")]),t("td",[s._v("vertical cuando el elemento está anidado con "),t("code",{pre:!0},[s._v("el-header")]),s._v(", de lo contrario, horizontal")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-cabecera"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de cabecera")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("altura de la cabecera")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("60px")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-barra-lateral"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de barra lateral")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho de la barra lateral")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("300px")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de pie de página")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("altura del pie de página")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("60px")])])])])}],!1,null,null,null);l.options.__file="container.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}},r=t(0),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),s._m(1),t("p",[s._v("Barra de pasos simple.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="active" finish-status="success">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n\n',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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),t("p",[s._v("Defina el atributo "),t("code",[s._v("active")]),s._v(" con un valor de tipo "),t("code",[s._v("Number")]),s._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),t("code",[s._v("space")]),s._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),t("code",[s._v("Boolean")]),s._v(". La unidad del atributo "),t("code",[s._v("space")]),s._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),t("code",[s._v("finish-status")]),s._v(" puede cambiar el estado de los pasos completados.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("Next step"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n      };\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      next() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Muestra el estado del step para cada paso.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Done"></el-step>\n  <el-step title="Processing"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),t("el-step",{attrs:{title:"Processing"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("p",[s._v("Utilice el atributo "),t("code",[s._v("title")]),s._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Done"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Processing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("El título y la descripción pueden estar centrados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="2" align-center>\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n  <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}}),t("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align-center")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede poner una descripción para cada paso.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="1">\n  <el-step title="Step 1" description="Some description"></el-step>\n  <el-step title="Step 2" description="Some description"></el-step>\n  <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :active="1">\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1),t("p",[s._v("El icono se define mediante la propiedad "),t("code",[s._v("icon")]),s._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Step bar vertical.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Step 1"></el-step>\n    <el-step title="Step 2"></el-step>\n    <el-step title="Step 3"></el-step>\n  </el-steps>\n</div>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1)]),t("p",[s._v("Sólo tiene que fijar el atributo "),t("code",[s._v("direction")]),s._v("  a "),t("code",[s._v("vertical")]),s._v(" en el elemento "),t("code",[s._v("el-steps")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Step 1" icon="el-icon-edit"></el-step>\n  <el-step title="Step 2" icon="el-icon-upload"></el-step>\n  <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Step 1"></el-step>\n  <el-step title="Step 2"></el-step>\n  <el-step title="Step 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:200,active:1,simple:""}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-bar-con-el-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con el status")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-bar-con-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con descripción")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-bar-vertical"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar vertical")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-bar-simple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar simple")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Step bar simple, donde se ignorará "),t("code",{pre:!0},[s._v("align-center")]),s._v(", "),t("code",{pre:!0},[s._v("description")]),s._v(", "),t("code",{pre:!0},[s._v("direction")]),s._v(" y "),t("code",{pre:!0},[s._v("space")]),s._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"steps-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("space")]),t("td",[s._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),t("td",[s._v("number / string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("direction")]),t("td",[s._v("dirección de visualización")]),t("td",[s._v("string")]),t("td",[s._v("vertical/horizontal")]),t("td",[s._v("horizontal")])]),t("tr",[t("td",[s._v("active")]),t("td",[s._v("actual paso de activación")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("process-status")]),t("td",[s._v("status del paso actual")]),t("td",[s._v("string")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("process")])]),t("tr",[t("td",[s._v("finish-status")]),t("td",[s._v("status del paso final")]),t("td",[s._v("string")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("finish")])]),t("tr",[t("td",[s._v("align-center")]),t("td",[s._v("centrado de título y descripción")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("simple")]),t("td",[s._v("si aplicar un tema simple")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo del paso")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("descripción del paso")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("icono del paso")]),t("td",[s._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),t("td",[s._v("wait / process / finish / error / success")]),t("td",[s._v("-")]),t("td")])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("icon")]),t("td",[s._v("Icono personalizado")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("Titulo del paso")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("Descripcion del paso")])])])])}],!1,null,null,null);l.options.__file="steps.md";a.default=l.exports},,,,,,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{color1:"#409EFF",color2:null,color3:"rgba(19, 206, 102, 0.8)",color4:"#409EFF",color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}},mounted:function(){this.$nextTick(function(){document.querySelectorAll(".source")[0].style.padding="0"})}},r=(t(508),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Especifica valor por defecto</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">No especifica valor por defecto</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color1: '#409EFF',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Especifica valor por defecto")]),t("el-color-picker",{model:{value:s.color1,callback:function(a){s.color1=a},expression:"color1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("No especifica valor por defecto")]),t("el-color-picker",{model:{value:s.color2,callback:function(a){s.color2=a},expression:"color2"}})],1)]),t("p",[s._v("ColorPicker requiere una variable de tipo "),t("code",[s._v("string")]),s._v(" para ser enlazada a "),t("code",[s._v("v-model")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Especifica valor por defecto"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("No especifica valor por defecto"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color2"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color3" show-alpha></el-color-picker>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(a){s.color3=a},expression:"color3"}})],1),t("p",[s._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),t("code",[s._v("show-alpha")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color5" show-alpha :predefine="predefineColors">\n</el-color-picker>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color5: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-color-picker",{attrs:{"show-alpha":"",predefine:s.predefineColors},model:{value:s.color5,callback:function(a){s.color5=a},expression:"color5"}})],1),t("p",[s._v("ColorPicker supports predefined color options")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color5"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":predefine")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"predefineColors"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(255, 69, 0, 0.68)'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("predefineColors")]),s._v(": [\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ff4500'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ff8c00'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ffd700'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#90ee90'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#00ced1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#1e90ff'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#c71585'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(255, 69, 0, 0.68)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgb(255, 120, 0)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsv(51, 100, 98)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsva(120, 40, 94, 0.5)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsl(181, 100%, 37%)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsla(209, 100%, 56%, 0.73)'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#c7158577'")]),s._v("\n        ]\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color4: '#409EFF'\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-color-picker",{model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"medium"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"small"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}}),t("el-color-picker",{attrs:{size:"mini"},model:{value:s.color4,callback:function(a){s.color4=a},expression:"color4"}})],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"predefined-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si se deshabilita el ColorPicker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del ColorPicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("medium / small / mini")])]),t("tr",[t("td",[s._v("show-alpha")]),t("td",[s._v("especifica si se muestra el control deslizante para el valor alpha")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color-format")]),t("td",[s._v("formato de color del "),t("code",{pre:!0},[s._v("v-model")])]),t("td",[s._v("string")]),t("td",[s._v("hsl / hsv / hex / rgb")]),t("td",[s._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase para el dropdown del ColorPicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("predefine")]),t("td",[s._v("opciones de colores predefinidas")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor del input cambia")]),t("td",[s._v("valor del color")])]),t("tr",[t("td",[s._v("active-change")]),t("td",[s._v("se dispara cuando el actual color activo cambia")]),t("td",[s._v("valor del color activo")])])])])}],!1,null,null,null);l.options.__file="color-picker.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}},r=(t(507),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Use Collapse para almacenar contenidos.")]),s._m(1),t("p",[s._v("Puede expandir varios paneles")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Consistency" name="1">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(a){s.activeNames=a},expression:"activeNames"}},[t("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[t("div",[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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeNames"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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 recalling."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeNames")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(val);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="Consistency" name="1">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(a){s.activeName=a},expression:"activeName"}},[t("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[t("div",[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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("p",[s._v("Activa el modo acordeón usado el atributo "),t("code",[s._v("accordion")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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 recalling."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-collapse",{attrs:{accordion:""}},[t("el-collapse-item",{attrs:{name:"1"}},[t("template",{slot:"title"},[s._v("\n      Consistency"),t("i",{staticClass:"header-icon el-icon-information"})]),t("div",[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;")]),t("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),t("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[t("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[t("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),t("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[t("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n      Consistency"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header-icon el-icon-information"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"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 recalling."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"acordeon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"titulo-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Título personalizado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Además de usar el atributo "),a("code",{pre:!0},[this._v("title")]),this._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("panel activo")]),t("td",[s._v("string (modo acordeón) / array (No modo acordeón)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("especifica si activa el modo acordeón")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Collapse")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre de Evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("se dispara cuando los paneles activos cambian")]),a("td",[this._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-collapse-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("identificador único del panel")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título del panel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="collapse.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={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:"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:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","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 a=this;console.log("active item:",s),setTimeout(function(t){s.indexOf("California")>-1&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}},r=(t(505),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),s._m(1),t("p",[s._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Child options expand when clicked (default)</span>\n  <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n  </el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">Child options expand when hovered</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: '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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),t("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(a){s.selectedOptions=a},expression:"selectedOptions"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),t("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(a){s.selectedOptions2=a},expression:"selectedOptions2"}})],1)]),t("p",[s._v("Al asignar al atributo "),t("code",[s._v("options")]),s._v(" un array de opciones, se genera un Cascader. El atributo "),t("code",[s._v("expand-trigger")]),s._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),t("code",[s._v("change")]),s._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("expand-trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("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: 'guide',\n          label: 'Guide',\n          disabled: true,\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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),t("p",[s._v("En este ejemplo, el primer elemento del array "),t("code",[s._v("options")]),s._v(" tiene un campo  "),t("code",[s._v("disabled: true")]),s._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),t("code",[s._v("disabled")]),s._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),t("code",[s._v("props")]),s._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),t("code",[s._v("value")]),s._v(", "),t("code",[s._v("label")]),s._v(" y "),t("code",[s._v("children")]),s._v(" también se pueden personalizar de la misma manera.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),t("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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),t("p",[s._v("El atributo "),t("code",[s._v("show-all-levels")]),s._v(" define si se visualizan todos los niveles. Si es "),t("code",[s._v("false")]),s._v(", sólo se muestra el último nivel.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-all-levels")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" v-model="selectedOptions3"></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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }],\n        selectedOptions3: ['component', 'data', 'tag']\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(a){s.selectedOptions3=a},expression:"selectedOptions3"}})],1),t("p",[s._v("El valor por defecto se puede definir con un array.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions3"')]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("También se pueden seleccionar las opciones del elemento padre.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" change-on-select></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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),t("p",[s._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),t("code",[s._v("change-on-select")]),s._v(" a "),t("code",[s._v("true")]),s._v(", también se pueden seleccionar opciones en los niveles superiores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options2" @active-item-change="handleItemChange" :props="props"></el-cascader>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options2: [{\n          label: 'California',\n          cities: []\n        }, {\n          label: 'Florida',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: 'Los Angeles'\n            }];\n          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: 'Orlando'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),t("p",[s._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),t("code",[s._v("active-item-change")]),s._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),t("code",[s._v("props")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@active-item-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleItemChange"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n>")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(") > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities.length) {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities = [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v("\n            }];\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(") > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities.length) {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities = [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Orlando'")]),s._v("\n            }];\n          }\n        }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Buscar y seleccionar opciones con una palabra clave.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Only options of the last level can be selected</span>\n  <el-cascader placeholder="Try searching: Guide" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">Options of all levels can be selected</span>\n  <el-cascader placeholder="Try searching: Guide" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\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            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),t("p",[s._v("Añadir "),t("code",[s._v("filterable")]),s._v(" a "),t("code",[s._v("el-cascader")]),s._v(" permite filtrar")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n  >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n  >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opcion-disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opcion Disabled")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Para desactivar una opción configure un campo "),a("code",{pre:!0},[this._v("disabled")]),this._v(" en el objeto de opción.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mostrar sólo el último nivel")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-valor-por-defecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con valor por defecto")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga dinamica de elementos hijos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"filtrable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Opciones")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("options")]),t("td",[s._v("datos de las opciones")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("opciones de configuracion,  mire la tabla siguiente")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor seleccionado")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase para el Cascader's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("input placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Cascader esta disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si se puede borrar el valor seleccionado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-trigger")]),t("td",[s._v("evento del elemento actual para expandirse.")]),t("td",[s._v("string")]),t("td",[s._v("click / hover")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("show-all-levels")]),t("td",[s._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("si se pueden buscar las opciones")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("change-on-select")]),t("td",[s._v("si se permite seleccionar una opción de cualquier nivel")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-filter")]),t("td",[s._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" o se devuelve una "),t("code",{pre:!0},[s._v("Promise")]),s._v(" y luego es rechazada, el filtrado será abortado.")]),t("td",[s._v("function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como valor")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("valor")])]),t("tr",[t("td",[s._v("active-item-change")]),t("td",[s._v("se dispara cuando la opcion activa del parent cambia, sólo funciona cuando "),t("code",{pre:!0},[s._v("change-on-select")]),s._v(" es "),t("code",{pre:!0},[s._v("false")]),s._v(".")]),t("td",[s._v("array de opciones activas")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando Cascader pierde el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando Cascader obtiene el foco")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("se dispara cuando el menu desplegable aparece o desaparece")]),t("td",[s._v("true cuando aparece, y false en otro caso")])])])])}],!1,null,null,null);l.options.__file="cascader.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}},r=(t(504),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Presenta una serie de imágenes o textos en un espacio limitado")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is hovered (default)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Switch when indicator is clicked</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n\n',script:null,style:"\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),t("el-carousel",{attrs:{height:"150px"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}),1)],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),t("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}),1)],1)]],2),t("p",[s._v("Combine "),t("code",[s._v("el-carousel")]),s._v("  con "),t("code",[s._v("el-carousel-item")]),s._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  "),t("code",[s._v("el-carousel-item")]),s._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  "),t("code",[s._v("trigger")]),s._v("  para  "),t("code",[s._v("click")]),s._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("150px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n\n',script:null,style:"\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}),1)]],2),t("p",[s._v("El atributo  "),t("code",[s._v("indicator-position")]),s._v("  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),t("code",[s._v("indicator-position")]),s._v("  a "),t("code",[s._v("outside")]),s._v("  los mueve hacia fuera; en cambio "),t("code",[s._v("indicator-position")]),s._v("  a "),t("code",[s._v("none")]),s._v("  los oculta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("indicator-position")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Puede definir cuando se visualizan las flechas")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n\n',script:null,style:"\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}),1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("arrow")]),s._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),t("code",[s._v("arrow")]),s._v(" a "),t("code",[s._v("always")]),s._v(" o "),t("code",[s._v("never")]),s._v(" para mostrar u ocultar las flechas permanentemente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"5000"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n\n',script:null,style:"\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}),1)]],2),t("p",[s._v("Ajuste "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("card")]),s._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"indicadores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicadores")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"flechas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flechas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"modo-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Card")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),a("code",{pre:!0},[this._v("card")]),this._v(" para carrusel.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("Alto del carrusel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("initial-index")]),t("td",[s._v("Indice del slider inicial activo (empieza desde 0)")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("Evento que muestra los indicadores")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("autoplay")]),t("td",[s._v("Si se enlazan automáticamente las diapositivas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("interval")]),t("td",[s._v("Intervalo del auto loop, en milisegundos")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("indicator-position")]),t("td",[s._v("Posición del indicador de paginación")]),t("td",[s._v("string")]),t("td",[s._v("outside/none")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("arrow")]),t("td",[s._v("Cuando se muestran las flechas")]),t("td",[s._v("string")]),t("td",[s._v("always/hover/never")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("Tipo de carrusel")]),t("td",[s._v("string")]),t("td",[s._v("card")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("loop")]),t("td",[s._v("Si se muestra cíclicamente")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Carousel")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("Se dispara cuando el slider activo cambia")]),a("td",[this._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos de Carousel")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("setActiveItem")]),t("td",[s._v("Cambio manual de slider")]),t("td",[s._v("indice del slider al que se va a cambiar, empezando por 0; o el "),t("code",{pre:!0},[s._v("name")]),s._v(" del "),t("code",{pre:!0},[s._v("el-carousel-item")]),s._v(" correspondiente")])]),t("tr",[t("td",[s._v("prev")]),t("td",[s._v("Cambia al slider anterior")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next")]),t("td",[s._v("Cambia al slider siguiente")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-carousel-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel-Item")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("Nombre del item que puede ser usado en "),t("code",{pre:!0},[s._v("setActiveItem")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="carousel.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e=t(21),r=t.n(e),l={data:function(){return{currentDate:r.a.format(new Date,"yyyy-MM-dd HH:mm")}}},n=(t(503),t(0)),p=Object(n.a)(l,function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("section",[s._m(0),s._m(1),s._m(2),s._m(3),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n\n',script:null,style:'\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},[e("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[e("span",[s._v("Card name")]),e("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("Operation button")])],1),s._l(4,function(a){return e("div",{key:a,staticClass:"text item"},[s._v("\n    "+s._s("List item "+a)+"\n  ")])})],2)],1),e("p",[s._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Card name"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Operation button"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n    {{'List item ' + o }}\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n  }\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n  }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),e("p",[s._v("La parte de la cabecera puede omitirse.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n\n',script:null,style:"\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n"}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},s._l(4,function(a){return e("div",{key:a,staticClass:"text item"},[s._v("\n    "+s._s("List item "+a)+"\n  ")])}),0)],1),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n    {{'List item ' + o }}\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n  }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),e("p",[s._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="~examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating button</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n",style:'\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-row",s._l(2,function(a,r){return e("el-col",{key:a,attrs:{span:8,offset:r>0?2:0}},[e("el-card",{attrs:{"body-style":{padding:"0px"}}},[e("img",{staticClass:"image",attrs:{src:t(224)}}),e("div",{staticStyle:{padding:"14px"}},[e("span",[s._v("Yummy hamburger")]),e("div",{staticClass:"bottom clearfix"},[e("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),e("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}),1)],1),e("p",[s._v("El atributo "),e("code",[s._v("body-style")]),s._v(" define el estilo CSS del "),e("code",[s._v("body")]),s._v(" personalizado. Este ejemplo también utiliza  "),e("code",[s._v("el-col")]),s._v(" para el layout.")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(o, index) in 2"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":body-style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(">")]),s._v("\n      "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("time")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),s._v("{{ currentDate }}"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("time")]),s._v(">")]),s._v("\n          "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n        "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".time")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#999")]),s._v(";\n  }\n  \n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bottom")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".button")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("float")]),s._v(": right;\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".image")]),s._v(" {\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(";\n    "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n  }\n\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n      "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n      "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n  }\n  \n  "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n      "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n  }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentDate")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),e("p",[s._v("Puede definir cuándo mostrar las sombras.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n',script:null,style:null}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-row",{attrs:{gutter:12}},[e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"always"}},[s._v("\n      Always\n    ")])],1),e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"hover"}},[s._v("\n      Hover\n    ")])],1),e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"never"}},[s._v("\n      Never\n    ")])],1)],1)],1),e("p",[s._v("El atributo de sombra determina cuándo se muestran las sombras. Puede ser "),e("code",[s._v("always")]),s._v(", "),e("code",[s._v("hover")]),s._v(" o "),e("code",[s._v("never")]),s._v(".")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n      Always\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(">")]),s._v("\n      Hover\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"never"')]),s._v(">")]),s._v("\n      Never\n    "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(">")]),s._v("\n  "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Muestra información dentro de un contenedor "),a("code",{pre:!0},[this._v("card")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Basico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("Card")]),this._v(" incluye titulo, contenido y operaciones.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"card-simple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-imagenes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con imágenes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("header")]),t("td",[s._v("Titulo del card. También acepta DOM pasado por "),t("code",{pre:!0},[s._v("slot#header")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("body-style")]),t("td",[s._v("Estilo CSS del cuerpo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{ padding: '20px' }")])]),t("tr",[t("td",[s._v("shadow")]),t("td",[s._v("cuando mostrar la sombra del Card")]),t("td",[s._v("string")]),t("td",[s._v("always / hover / never")]),t("td",[s._v("always")])])])])}],!1,null,"21b0cc47",null);p.options.__file="card.md";a.default=p.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{activeName:"second",activeName2:"first",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,tabPosition:"top"}},methods:{handleClick:function(s,a){console.log(s,a)},handleTabsEdit:function(s,a){if("add"===a){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===a){var e=this.editableTabs,r=this.editableTabsValue;r===s&&e.forEach(function(a,t){if(a.name===s){var l=e[t+1]||e[t-1];l&&(r=l.name)}}),this.editableTabsValue=r,this.editableTabs=e.filter(function(a){return a.name!==s})}},addTab:function(s){var a=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:a,content:"New Tab content"}),this.editableTabsValue2=a},removeTab:function(s){var a=this.editableTabs2,t=this.editableTabsValue2;t===s&&a.forEach(function(e,r){if(e.name===s){var l=a[r+1]||a[r-1];l&&(t=l.name)}}),this.editableTabsValue2=t,this.editableTabs2=a.filter(function(a){return a.name!==s})}}},r=t(0),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),s._m(1),t("p",[s._v("Tabulación básica y concisa")]),t("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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(a){s.activeName=a},expression:"activeName"}},[t("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),t("p",[s._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),t("code",[s._v("value")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("User"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("Config"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("Role"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Pestañas diseñadas como tarjetas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),t("p",[s._v("Establecer "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("card")]),s._v(" para obtener una pestaña diseñada como tarjeta.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Pestañas de tarjeta con bordes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),t("p",[s._v("Establecer "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("border-card")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">top</el-radio-button>\n    <el-radio-button label="right">right</el-radio-button>\n    <el-radio-button label="bottom">bottom</el-radio-button>\n    <el-radio-button label="left">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        tabPosition: 'top'\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(a){s.tabPosition=a},expression:"tabPosition"}},[t("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),t("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),t("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),t("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),t("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[t("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),t("p",[s._v("Es posible escoger entre cuatro direcciones: "),t("code",[s._v('tabPosition="left|right|top|bottom"')])]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("top"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("right"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("left"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":tab-position")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabPosition")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",[t("span",{attrs:{slot:"label"},slot:"label"},[t("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n    Route\n  ")]),t("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),t("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),t("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"label"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v(" Route"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    Route\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),t("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" :key="item.name" :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.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(a){s.editableTabsValue=a},expression:"editableTabsValue"}},s._l(s.editableTabs,function(a,e){return t("el-tab-pane",{key:a.name,attrs:{label:a.title,name:a.name}},[s._v("\n    "+s._s(a.content)+"\n  ")])}),1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"editableTabsValue"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@edit")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    {{item.content}}\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabsValue")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabs")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'add'")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs.push({\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n          });\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'remove'")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs;\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue;\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n                "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs = tabs.filter("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="margin-bottom: 20px;">\n  <el-button size="small" @click="addTab(editableTabsValue2)">\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">\n  <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :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        editableTabsValue2: '2',\n        editableTabs2: [{\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      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs2.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue2 = activeName;\n        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticStyle:{"margin-bottom":"20px"}},[t("el-button",{attrs:{size:"small"},on:{click:function(a){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),t("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(a){s.editableTabsValue2=a},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(a,e){return t("el-tab-pane",{key:a.name,attrs:{label:a.title,name:a.name}},[s._v("\n    "+s._s(a.content)+"\n  ")])}),1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"editableTabsValue2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-remove")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    {{item.content}}\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabsValue2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabs2")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2.push({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n        });\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"tabulacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabulación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"estilo-de-tarjeta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo de Tarjeta")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tarjeta-con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tarjeta con Bordes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"posicion-de-tabulacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de tabulación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Es posible usar el atributo "),a("code",{pre:!0},[this._v("tab-position")]),this._v(" para establecer la posición de la tabulación.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"pestana-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pestaña Personalizada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agregar y cerrar pestaña")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-pestanas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Pestañas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado, nombre de la pestaña seleccionada")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("nombre de la primer pestaña")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de Pestaña")]),t("td",[s._v("string")]),t("td",[s._v("card/border-card")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si la Pestaña es cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("addable")]),t("td",[s._v("si la Pestaña es añadible")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si la Pestaña es añadible y cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("tab-position")]),t("td",[s._v("posición de tabulación")]),t("td",[s._v("string")]),t("td",[s._v("top/right/bottom/left")]),t("td",[s._v("top")])]),t("tr",[t("td",[s._v("stretch")]),t("td",[s._v("si el ancho del tab se ajusta automáticamente a su contenedor")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("before-leave")]),t("td",[s._v("función "),t("code",{pre:!0},[s._v("hook")]),s._v(" antes de cambiar de pestaña. Si se devuelve "),t("code",{pre:!0},[s._v("false")]),s._v(" o se devuelve una "),t("code",{pre:!0},[s._v("Promise")]),s._v(" y luego se rechaza, se evitará el cambio.")]),t("td",[s._v("Function(activeName, oldActiveName)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-pestanas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Pestañas")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("tab-click")]),t("td",[s._v("se lanza cuando se hace click a una pestaña")]),t("td",[s._v("pestaña clickeada")])]),t("tr",[t("td",[s._v("tab-remove")]),t("td",[s._v("se lanza cuando se hace click al botón tab-remove")]),t("td",[s._v("nombre de la pestaña removida")])]),t("tr",[t("td",[s._v("tab-add")]),t("td",[s._v("se lanza cuando se hace click al botón tab-add")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("edit")]),t("td",[s._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),t("td",[s._v("(targetName, action)")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"attributos-del-tab-pane"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributos del Tab-pane")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptados")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("título de la pestaña")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la Tabulación está deshabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si el Tab es cerrable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("lazy")]),t("td",[s._v("si Tab es renderizado con "),t("code",{pre:!0},[s._v("lazy-load")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);l.options.__file="tabs.md";a.default=l.exports},,function(s,a,t){"use strict";t.r(a);var e={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{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"}],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"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],tableData7:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],currentRow:null,multipleSelection:[],search:""}},methods:{getSummaries:function(s){var a=s.columns,t=s.data,e=[];return a.forEach(function(s,a){if(0!==a){var r=t.map(function(a){return Number(a[s.property])});r.every(function(s){return isNaN(s)})?e[a]="N/A":e[a]="$ "+r.reduce(function(s,a){var t=Number(a);return isNaN(t)?s:s+a},0)}else e[a]="Total Cost"}),e},resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var a=this;s?s.forEach(function(s){a.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,a){console.log(s,a)},handleDelete:function(s,a){console.log(s,a)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,a){return s.address},filterTag:function(s,a){return a.tag===s},filterHandler:function(s,a,t){return a[t.property]===s},tableRowClassName:function(s){s.row;var a=s.rowIndex;return 1===a?"warning-row":3===a?"success-row":""},deleteRow:function(s,a){a.splice(s,1)},arraySpanMethod:function(s){s.row,s.column;var a=s.rowIndex,t=s.columnIndex;if(a%2==0){if(0===t)return[1,2];if(1===t)return[0,0]}},objectSpanMethod:function(s){s.row,s.column;var a=s.rowIndex;if(0===s.columnIndex)return a%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}},indexMethod:function(s){return 2*s}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}},r=(t(535),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),s._m(1),t("p",[s._v("La tabla básica es solo para mostrar datos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'  <template>\n    <el-table :data="tableData" style="width: 100%">\n      <el-table-column prop="date" label="Fecha" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="Nombre" width="180">\n      </el-table-column>\n      <el-table-column prop="address" label="Dirección">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Después de haber establecido el atributo "),t("code",[s._v("data")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(" con un arreglo de objetos, puede usar la propiedad "),t("code",[s._v("prop")]),s._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),t("code",[s._v("data")]),s._v(") en "),t("code",[s._v("el-table-column")]),s._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),t("code",[s._v("label")]),s._v(" para definir el nombre de la columna. También puede usar el atributo "),t("code",[s._v("width")]),s._v(" para establecer el ancho de las columnas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n      data() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" stripe style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("stripe")]),s._v(" también acepta un "),t("code",[s._v("Boolean")]),s._v(". Si se encuentra "),t("code",[s._v("true")]),s._v(", la tabla será con franjas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("stripe")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),t("code",[s._v("border")]),s._v(" a "),t("code",[s._v("true")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData2:  [{\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:"\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Utilice "),t("code",[s._v("row-class-name")]),s._v(" en "),t("code",[s._v("el-table")]),s._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData2"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":row-class-name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".warning-row")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": oldlace;\n  }\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".success-row")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#f0f9eb")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      tableRowClassName({row, rowIndex}) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning-row'")]),s._v(";\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success-row'")]),s._v(";\n        }\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData2")]),s._v(":  [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" height="250" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Al configurar el atributo "),t("code",[s._v("height")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(", puede fijar la cabecera de la tabla sin agregar otro código.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" style="width: 100%">\n    <el-table-column fixed prop="date" label="Fecha" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="120">\n    </el-table-column>\n    <el-table-column prop="state" label="Estado" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="Ciudad" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="Código postal" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="Operaciones" width="120">\n      <template slot-scope="scope">\n        <el-button @click="handleClick" type="text" size="small">Detalle</el-button>\n        <el-button type="text" size="small">Editar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\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          tag: 'Home'\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          tag: 'Office'\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          tag: 'Home'\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          tag: 'Office'\n        }]\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detalle")]),t("el-button",{attrs:{type:"text",size:"small"}},[s._v("Editar")])]}}])})],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("fixed")]),s._v(" es utilizado en "),t("code",[s._v("el-table-column")]),s._v(", este acepta un "),t("code",[s._v("Boolean")]),s._v(". Si es "),t("code",[s._v("true")]),s._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),t("code",[s._v("left")]),s._v(" y "),t("code",[s._v("right")]),s._v(", ambos indican donde debe ser fijada la columna.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Detalle"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Editar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(");\n      }\n    },\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" style="width: 100%" height="250">\n    <el-table-column fixed prop="date" label="Fecha" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="120">\n    </el-table-column>\n    <el-table-column prop="state" label="Estado" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="Ciudad" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="Código postal" width="120">\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2),t("p",[s._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData4" style="width: 100%" max-height="250">\n    <el-table-column fixed prop="date" label="Fecha" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="120">\n    </el-table-column>\n    <el-table-column prop="state" label="Estado" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="Ciudad" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="Código postal" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="Operaciones" width="120">\n      <template slot-scope="scope">\n        <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n          Eliminar\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData4: [{\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(t){t.preventDefault(),s.deleteRow(a.$index,s.tableData4)}}},[s._v("\n          Eliminar\n        ")])]}}])})],1)]],2),t("p",[s._v("Al configurar el atributo "),t("code",[s._v("max-height")]),s._v(" de "),t("code",[s._v("el-table")]),s._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData4"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("max-height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click.native.prevent")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n          Eliminar\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData4")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("p",[s._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" width="150">\n    </el-table-column>\n    <el-table-column label="Información de entrega">\n      <el-table-column prop="name" label="Nombre" width="120">\n      </el-table-column>\n      <el-table-column label="Información de dirección">\n        <el-table-column prop="state" label="Estado" width="120">\n        </el-table-column>\n        <el-table-column prop="city" label="Ciudad" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Dirección" width="300">\n        </el-table-column>\n        <el-table-column prop="zip" label="Código postal" width="120">\n        </el-table-column>\n      </el-table-column>\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),t("el-table-column",{attrs:{label:"Información de entrega"}},[t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{label:"Información de dirección"}},[t("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2),t("p",[s._v("Solo necesitas colocar "),t("code",[s._v("el-table-column")]),s._v(" dentro de un "),t("code",[s._v("el-table-column")]),s._v(", de esta forma lograrás agruparlas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Información de entrega"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Información de dirección"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Estado"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ciudad"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Código postal"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),t("p",[s._v("La selección de una fila esta soportada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n    <el-table-column type="index" width="50">\n    </el-table-column>\n    <el-table-column property="date" label="Fecha" width="120">\n    </el-table-column>\n    <el-table-column property="name" label="Nombre" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="Dirección">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>\n    <el-button @click="setCurrent()">Limpiar selección</el-button>\n  </div>\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        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[t("el-table-column",{attrs:{type:"index",width:"50"}}),t("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{on:{click:function(a){s.setCurrent(s.tableData[1])}}},[s._v("Seleccionar segunda fila")]),t("el-button",{on:{click:function(a){s.setCurrent()}}},[s._v("Limpiar selección")])],1)]],2),t("p",[s._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),t("code",[s._v("highlight-current-row")]),s._v(". Un evento llamado "),t("code",[s._v("current-change")]),s._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),t("code",[s._v("currentRow")]),s._v(" y "),t("code",[s._v("oldCurrentRow")]),s._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),t("code",[s._v("el-table-column")]),s._v(" con el atributo "),t("code",[s._v("type")]),s._v(" asignado al "),t("code",[s._v("index")]),s._v(" y podrá ver el índice iniciando desde 1.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"singleTable"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("highlight-current-row")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Seleccionar segunda fila"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Limpiar selección"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentRow")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n      }\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      setCurrent(row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("También puede seleccionar múltiples filas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table ref="multipleTable" :data="tableData3" style="width: 100%" @selection-change="handleSelectionChange">\n    <el-table-column type="selection" width="55">\n    </el-table-column>\n    <el-table-column label="Fecha" width="120">\n      <template slot-scope="scope">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column property="name" label="Nombre" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="Dirección" show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n    <el-button @click="toggleSelection()">Limpiar selección</el-button>\n  </div>\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        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3},on:{"selection-change":s.handleSelectionChange}},[t("el-table-column",{attrs:{type:"selection",width:"55"}}),t("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:s._u([{key:"default",fn:function(a){return[s._v(s._s(a.row.date))]}}])}),t("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{on:{click:function(a){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Cambia el estado de selección de la segunda y tercera fila.")]),t("el-button",{on:{click:function(a){s.toggleSelection()}}},[s._v("Limpiar selección")])],1)]],2),t("p",[s._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),t("code",[s._v("el-table-column")]),s._v(" con su "),t("code",[s._v("type")]),s._v(" establecido en "),t("code",[s._v("selection")]),s._v(". Además de la selección múltiple, este ejemplo también utiliza "),t("code",[s._v("show-overflow-tooltip")]),s._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),t("code",[s._v("show-overflow-tooltip")]),s._v(", que acepta un valor "),t("code",[s._v("Boolean")]),s._v(". Cuando este está establecido en "),t("code",[s._v("true")]),s._v(", el contenido extra puede mostrar un "),t("em",[s._v("tooltip")]),s._v(" cuando se hace "),t("em",[s._v("hover")]),s._v(" sobre la celda.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"multipleTable"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@selection-change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selection"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"55"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("{{ scope.row.date }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Cambia el estado de selección de la segunda y tercera fila."),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Limpiar selección"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),t("p",[s._v("Ordena los datos para encontrar o comparar información rápidamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" :default-sort="{prop: \'date\', order: \'descending\'}" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección" :formatter="formatter">\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    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:s.formatter}})],1)]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("sortable")]),s._v(" para ordenar los datos de una columna. Este acepta un "),t("code",[s._v("Boolean")]),s._v(" con un valor por defecto "),t("code",[s._v("false")]),s._v(". Establezca el atributo "),t("code",[s._v("default-sort")]),s._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),t("code",[s._v("sort-method")]),s._v(" o "),t("code",[s._v("sort-by")]),s._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),t("code",[s._v("sortable")]),s._v(" a "),t("code",[s._v("custom")]),s._v(", y escuche el evento "),t("code",[s._v("sort-change")]),s._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),t("code",[s._v("formatter")]),s._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("column")]),s._v(". Puede disparar este de acuerdo a sus propias necesidades.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-sort")]),s._v(" = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),t("p",[s._v("Filtra la tabla para encontrar la información que necesita.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button @click="resetDateFilter">清除日期过滤器</el-button>\n  <el-button @click="clearFilter">清除所有过滤器</el-button>\n  <el-table ref="filterTable" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="Fecha" sortable width="180" column-key="date" :filters="[{text: \'2016-05-01\', value: \'2016-05-01\'}, {text: \'2016-05-02\', value: \'2016-05-02\'}, {text: \'2016-05-03\', value: \'2016-05-03\'}, {text: \'2016-05-04\', value: \'2016-05-04\'}]" :filter-method="filterHandler">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección" :formatter="formatter">\n    </el-table-column>\n    <el-table-column prop="tag" label="Etiqueta" width="100" :filters="[{ text: \'Home\', value: \'Home\' }, { text: \'Office\', value: \'Office\' }]" :filter-method="filterTag" filter-placement="bottom-end">\n      <template slot-scope="scope">\n        <el-tag :type="scope.row.tag === \'Home\' ? \'primary\' : \'success\'" disable-transitions>{{scope.row.tag}}</el-tag>\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-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{on:{click:s.resetDateFilter}},[s._v("清除日期过滤器")]),t("el-button",{on:{click:s.clearFilter}},[s._v("清除所有过滤器")]),t("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":s.filterHandler}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:s.formatter}}),t("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-tag",{attrs:{type:"Home"===a.row.tag?"primary":"success","disable-transitions":""}},[s._v(s._s(a.row.tag))])]}}])})],1)]],2),t("p",[s._v("Establezca el atributo "),t("code",[s._v("filters")]),s._v(" y "),t("code",[s._v("filter-method")]),s._v(" en "),t("code",[s._v("el-table-column")]),s._v(" haciendo esta columna filtrable. "),t("code",[s._v("filters")]),s._v(" es un arreglo, y "),t("code",[s._v("filter-method")]),s._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),t("code",[s._v("value")]),s._v(", "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("column")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resetDateFilter"')]),s._v(">")]),s._v("清除日期过滤器"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearFilter"')]),s._v(">")]),s._v("清除所有过滤器"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterTable"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("column-key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterHandler"')]),s._v("\n    >")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Etiqueta"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterTag"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filter-placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disable-transitions")]),s._v(">")]),s._v("{{scope.row.tag}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }]\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      resetDateFilter() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.filterTable.clearFilter("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(");\n      },\n      clearFilter() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" property = column["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'property'")]),s._v("];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row[property] === value;\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),t("p",[s._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" style="width: 100%">\n    <el-table-column label="Fecha" width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column label="Nombre" width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label="Operaciones">\n      <template slot-scope="scope">\n        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Editar</el-button>\n        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Eliminar</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-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    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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("i",{staticClass:"el-icon-time"}),t("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(a.row.date))])]}}])}),t("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-popover",{attrs:{trigger:"hover",placement:"top"}},[t("p",[s._v("Name: "+s._s(a.row.name))]),t("p",[s._v("Addr: "+s._s(a.row.address))]),t("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[t("el-tag",{attrs:{size:"medium"}},[s._v(s._s(a.row.name))])],1)])]}}])}),t("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("el-button",{attrs:{size:"mini"},on:{click:function(t){s.handleEdit(a.$index,a.row)}}},[s._v("Editar")]),t("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(t){s.handleDelete(a.$index,a.row)}}},[s._v("Eliminar")])]}}])})],1)]],2),t("p",[s._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slots")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-time"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px"')]),s._v(">")]),s._v("{{ scope.row.date }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Name: {{ scope.row.name }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Addr: {{ scope.row.address }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("{{ scope.row.name }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Operaciones"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Editar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Eliminar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),t("p",[s._v("Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">\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-column align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input v-model="search" size="mini" placeholder="Type to search">\n      </el-input></template>\n      <template slot-scope="scope">\n        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</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: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-04',\n          name: 'John',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-01',\n          name: 'Morgan',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-03',\n          name: 'Jessy',\n          address: 'No. 189, Grove St, Los Angeles',\n        }],\n        search: ''\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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData7.filter(function(a){return!s.search||a.name.toLowerCase().includes(s.search.toLowerCase())})}},[t("el-table-column",{attrs:{label:"Date",prop:"date"}}),t("el-table-column",{attrs:{label:"Name",prop:"name"}}),t("el-table-column",{attrs:{align:"right"},scopedSlots:s._u([{key:"header",fn:function(a){return[t("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:s.search,callback:function(a){s.search=a},expression:"search"}})]}},{key:"default",fn:function(a){return[t("el-button",{attrs:{size:"mini"},on:{click:function(t){s.handleEdit(a.$index,a.row)}}},[s._v("Edit")]),t("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(t){s.handleDelete(a.$index,a.row)}}},[s._v("Delete")])]}}])})],1)]],2),t("p",[s._v("Puede personalizar el aspecto del encabezado con header "),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"search"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Type to search"')]),s._v("/>")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Morgan'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Jessy'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("search")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n      }\n    },\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),t("p",[s._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),t("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 slot-scope="props">\n        <p>Estado: {{ props.row.state }}</p>\n        <p>Ciudad: {{ props.row.city }}</p>\n        <p>Dirección: {{ props.row.address }}</p>\n        <p>Código postal: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column label="Fecha" prop="date">\n    </el-table-column>\n    <el-table-column label="Nombre" 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[t("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn:function(a){return[t("p",[s._v("Estado: "+s._s(a.row.state))]),t("p",[s._v("Ciudad: "+s._s(a.row.city))]),t("p",[s._v("Dirección: "+s._s(a.row.address))]),t("p",[s._v("Código postal: "+s._s(a.row.zip))])]}}])}),t("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2),t("p",[s._v("Puede activar la fila expandible estableciendo la propiedad "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("expand")]),s._v(" y Scoped Slots. La plantilla para "),t("code",[s._v("el-table-column")]),s._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),t("code",[s._v("Scoped Slots")]),s._v(" en plantillas de columna personalizadas.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Estado: {{ props.row.state }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Ciudad: {{ props.row.city }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Dirección: {{ props.row.address }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Código postal: {{ props.row.zip }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),t("p",[s._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData6" border="" show-summary style="width: 100%">\n    <el-table-column prop="id" label="ID" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre">\n    </el-table-column>\n    <el-table-column prop="amount1" sortable label="Monto 1">\n    </el-table-column>\n    <el-table-column prop="amount2" sortable label="Monto 2">\n    </el-table-column>\n    <el-table-column prop="amount3" sortable label="Monto 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table :data="tableData6" border="" height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px">\n    <el-table-column prop="id" label="ID" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre">\n    </el-table-column>\n    <el-table-column prop="amount1" label="Costo 1 ($)">\n    </el-table-column>\n    <el-table-column prop="amount2" label="Costo 2 ($)">\n    </el-table-column>\n    <el-table-column prop="amount3" label="Costo 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData6: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Costo total';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),t("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),t("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),t("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2),t("p",[s._v("Puede agregar la fila de resumen configurando "),t("code",[s._v("show-summary")]),s._v(" a "),t("code",[s._v("true")]),s._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),t("code",[s._v("sum-text")]),s._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),t("code",[s._v("summary-method")]),s._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":summary-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getSummaries"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Costo 1 ($)"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Costo 2 ($)"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Costo 3 ($)"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      getSummaries(param) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" { columns, data } = param;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sums = [];\n        columns.forEach("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n            sums[index] = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Costo total'")]),s._v(";\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(";\n          }\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" values = data.map("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(item[column.property]));\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!values.every("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value))) {\n            sums[index] = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'$ '")]),s._v(" + values.reduce("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" value = "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(curr);\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value)) {\n                "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev + curr;\n              } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n                "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev;\n              }\n            }, "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            sums[index] = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'N/A'")]),s._v(";\n          }\n        });\n\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" sums;\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(18),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-table :data="tableData6" :span-method="arraySpanMethod" border style="width: 100%">\n      <el-table-column prop="id" label="ID" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="Nombre">\n      </el-table-column>\n      <el-table-column prop="amount1" sortable label="Monto 1">\n      </el-table-column>\n      <el-table-column prop="amount2" sortable label="Monto 2">\n      </el-table-column>\n      <el-table-column prop="amount3" sortable label="Monto 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">\n      <el-table-column prop="id" label="ID" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="Nombre">\n      </el-table-column>\n      <el-table-column prop="amount1" label="Monto 1">\n      </el-table-column>\n      <el-table-column prop="amount2" label="Monto 2">\n      </el-table-column>\n      <el-table-column prop="amount3" label="Monto 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData6: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,"span-method":s.arraySpanMethod,border:""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),t("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,"span-method":s.objectSpanMethod,border:""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),t("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),t("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),t("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2),t("p",[s._v("Utilice el atributo "),t("code",[s._v("span-method")]),s._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),t("code",[s._v("row")]),s._v(", columna actual "),t("code",[s._v("column")]),s._v(", índice de fila actual "),t("code",[s._v("rowIndex")]),s._v(" y índice de columna actual "),t("code",[s._v("columnIndex")]),s._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),t("code",[s._v("rowspan")]),s._v(" y el segundo "),t("code",[s._v("colspan")]),s._v(". También puede devolver un objeto con las propiedades "),t("code",[s._v("rowspan")]),s._v(" y "),t("code",[s._v("colspan")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"arraySpanMethod"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"objectSpanMethod"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 1"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 2"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monto 3"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("];\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n          "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n            };\n          } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n              "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n            };\n          }\n        }\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(20),s._m(21),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" style="width: 100%">\n    <el-table-column type="index" :index="indexMethod">\n    </el-table-column>\n    <el-table-column prop="date" label="Fecha" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Nombre" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Dirección">\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          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\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          tag: 'Office'\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          tag: 'Home'\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          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{type:"index",index:s.indexMethod}}),t("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2),t("p",[s._v("Para personalizar el índice de la fila, utilice el atributo "),t("code",[s._v("index")]),s._v(" en "),t("code",[s._v("<el-table-column>")]),s._v(" con "),t("code",[s._v("type=index")]),s._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"indexMethod"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Fecha"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nombre"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Dirección"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n        }],\n      }\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      indexMethod(index) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" index * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29),s._m(30),s._m(31),s._m(32),s._m(33)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"tablas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tablas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-basica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla básica")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-franjas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con franjas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con bordes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-estados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con estados")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con cabecera fija")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas fijas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas y cabecera fija.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando cabeceras de la tabla")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccion-unica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección única")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"seleccion-multiple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección multiple")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"ordenamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ordenamiento")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"filtros"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtros")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plantilla de columna personalizada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table con cabecera personalizada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"fila-expandible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila expandible")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"fila-de-resumen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila de resumen")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fusión de filas y columnas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Configurar "),a("em",[this._v("rowspan")]),this._v(" y "),a("em",[this._v("colspan")]),this._v(" le permite fusionar celdas.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"indice-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Índice personalizado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Puede personalizar el índice de la fila con la propiedad "),a("code",{pre:!0},[this._v("type=index")]),this._v(" de las columnas.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Datos de la tabla")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("Altura de la tabla. Por defecto esta tiene un tamaño "),t("code",{pre:!0},[s._v("auto")]),s._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max-height")]),t("td",[s._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),t("code",{pre:!0},[s._v("auto")]),s._v(" hasta que alcanza la altura máxima. El "),t("code",{pre:!0},[s._v("max-height")]),s._v(" es medido en pixeles, lo mismo que "),t("code",{pre:!0},[s._v("height")])]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("stripe")]),t("td",[s._v("especifica si la tabla será en franjas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("especifica si la tabla tiene bordes verticales")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de la tabla")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fit")]),t("td",[s._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-header")]),t("td",[s._v("especifica si la cabecera de la tabla es visible")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("highlight-current-row")]),t("td",[s._v("especifica si la fila actual es resaltado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("current-row-key")]),t("td",[s._v("clave de la fila actual, un ajuste de propiedad única")]),t("td",[s._v("string,number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-class-name")]),t("td",[s._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),t("td",[s._v("Function({row, rowIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-style")]),t("td",[s._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),t("td",[s._v("Function({row, rowIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("cell-class-name")]),t("td",[s._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("cell-style")]),t("td",[s._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-row-class-name")]),t("td",[s._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-row-style")]),t("td",[s._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),t("td",[s._v("Function({row, rowIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-cell-class-name")]),t("td",[s._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("header-cell-style")]),t("td",[s._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),t("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-key")]),t("td",[s._v("clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio "),t("code",{pre:!0},[s._v("reserve-selection")]),s._v(" esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, "),t("code",{pre:!0},[s._v("user.info.id")]),s._v(", pero "),t("code",{pre:!0},[s._v("user.info[0].id")]),s._v(" no es permitido, en cuyo caso se debe usar una "),t("code",{pre:!0},[s._v("function")])]),t("td",[s._v("Function(row)/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),t("code",{pre:!0},[s._v('slot="empty"')])]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("No Data")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),t("code",{pre:!0},[s._v('type="expand"')])]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-row-keys")]),t("td",[s._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),t("code",{pre:!0},[s._v("row-key")]),s._v(" antes de usar esta propiedad")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td")]),t("tr",[t("td",[s._v("default-sort")]),t("td",[s._v("establece la columna y orden por defecto. La propiedad "),t("code",{pre:!0},[s._v("prop")]),s._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),t("code",{pre:!0},[s._v("order")]),s._v(" es utilizada para definir el tipo de orden por defecto")]),t("td",[s._v("Object")]),t("td",[t("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),t("td",[s._v("if "),t("code",{pre:!0},[s._v("prop")]),s._v(" is set, and "),t("code",{pre:!0},[s._v("order")]),s._v(" is not set, then "),t("code",{pre:!0},[s._v("order")]),s._v(" is default to ascending")])]),t("tr",[t("td",[s._v("tooltip-effect")]),t("td",[s._v("propiedad "),t("code",{pre:!0},[s._v("effect")]),s._v(" para efectos en tooltip")]),t("td",[s._v("String")]),t("td",[s._v("dark/light")]),t("td")]),t("tr",[t("td",[s._v("show-summary")]),t("td",[s._v("especifica si debe mostrar la fila de resumen")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sum-text")]),t("td",[s._v("texto a mostrar para la primer columna de la fila de resumen")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("Sum")])]),t("tr",[t("td",[s._v("summary-method")]),t("td",[s._v("método personalizado para resumen")]),t("td",[s._v("Function({ columns, data })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("span-method")]),t("td",[s._v("método que devuelve "),t("em",[s._v("rowspan")]),s._v(" y "),t("em",[s._v("colspan")])]),t("td",[s._v("Function({ row, column, rowIndex, columnIndex })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("select-on-indeterminate")]),t("td",[s._v("controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre del evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("se dispara cuando el usuario hace clic al "),t("em",[s._v("checkbox")]),s._v(" (caja de selección) en una fila")]),t("td",[s._v("selection, row")])]),t("tr",[t("td",[s._v("select-all")]),t("td",[s._v("se dispara cando el usuario hace clic al "),t("em",[s._v("checkbox")]),s._v(" (caja de selección) en una cabecera de la tabla")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("selection-change")]),t("td",[s._v("se dispara cuando selección cambia")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("cell-mouse-enter")]),t("td",[s._v("se dispara cuando se desplaza dentro de una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-mouse-leave")]),t("td",[s._v("se dispara cuando se desplaza fuera de una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-click")]),t("td",[s._v("se dispara cuando se hace clic en una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-dblclick")]),t("td",[s._v("se dispara cuando se hace doble clic en una celda")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("row-click")]),t("td",[s._v("se dispara cuando se hace clic en una fila")]),t("td",[s._v("row, event, column")])]),t("tr",[t("td",[s._v("row-contextmenu")]),t("td",[s._v("se dispara cuando el usuario hace clic derecho en una fila")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("row-dblclick")]),t("td",[s._v("se dispara cuando se hace doble clic en una fila")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("header-click")]),t("td",[s._v("se dispara cuando se hace click en una cabecera de columna")]),t("td",[s._v("column, event")])]),t("tr",[t("td",[s._v("header-contextmenu")]),t("td",[s._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),t("td",[s._v("column, event")])]),t("tr",[t("td",[s._v("sort-change")]),t("td",[s._v("se dispara cuando el ordenamiento de la tabla cambia")]),t("td",[s._v("{ column, prop, order }")])]),t("tr",[t("td",[s._v("filter-change")]),t("td",[s._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),t("td",[s._v("filters")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("se dispara cuando la fila actual cambia")]),t("td",[s._v("currentRow, oldCurrentRow")])]),t("tr",[t("td",[s._v("header-dragend")]),t("td",[s._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),t("td",[s._v("newWidth, oldWidth, column, event")])]),t("tr",[t("td",[s._v("expand-change")]),t("td",[s._v("se dispara cuando el usuario expande o colapsa una fila")]),t("td",[s._v("row, expandedRows")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Metodo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("clearSelection")]),t("td",[s._v("utilizado en selección múltiple de la tabla, limpiar selección")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("toggleRowSelection")]),t("td",[s._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),t("td",[s._v("row, selected")])]),t("tr",[t("td",[s._v("toggleAllSelection")]),t("td",[s._v("usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas.")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("toggleRowExpansion")]),t("td",[s._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),t("td",[s._v("row, expanded")])]),t("tr",[t("td",[s._v("setCurrentRow")]),t("td",[s._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),t("td",[s._v("row")])]),t("tr",[t("td",[s._v("clearSort")]),t("td",[s._v("limpiar ordenamiento, restaurar datos a orden original")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearFilter")]),t("td",[s._v("Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.")]),t("td",[s._v("columnKey")])]),t("tr",[t("td",[s._v("doLayout")]),t("td",[s._v("refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sort")]),t("td",[s._v("Ordenar tabla manualmente. La propiedad "),t("code",{pre:!0},[s._v("prop")]),s._v(" se utiliza para establecer la columna de ordenación, la propiedad "),t("code",{pre:!0},[s._v("order")]),s._v(" se utiliza para establecer el orden.")]),t("td",[s._v("prop: string, order: string")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slots-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de la tabla")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[this._v("append")]),a("td",[this._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),a("em",[this._v("scroll")]),this._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos para las columnas de la tabla")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de la columna. Si se establece a "),t("code",{pre:!0},[s._v("selection")]),s._v(", la columna puede mostrar un "),t("em",[s._v("checkbox")]),s._v(". Si se establece a "),t("code",{pre:!0},[s._v("index")]),s._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),t("code",{pre:!0},[s._v("expand")]),s._v(", la columna puede mostrar un ícono para expandir.")]),t("td",[s._v("string")]),t("td",[s._v("selection/index/expand")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("index")]),t("td",[s._v("personalice los índices para cada fila, funciona en columnas con "),t("code",{pre:!0},[s._v("type=index")])]),t("td",[s._v("number, Function(index)")]),t("td",[s._v("-")]),t("td",[s._v("-")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("etiqueta de la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("column-key")]),t("td",[s._v("clave de la columna. Si necesita utilizar el evento "),t("code",{pre:!0},[s._v("filter-change")]),s._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),t("td",[s._v("string")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prop")]),t("td",[s._v("nombre del campo. También puede usar su alias: "),t("code",{pre:!0},[s._v("property")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho de la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min-width")]),t("td",[s._v("ancho mínimo de la columna. Columnas con "),t("code",{pre:!0},[s._v("width")]),s._v(" tienen un ancho fijo, mientras que las columnas con "),t("code",{pre:!0},[s._v("min-width")]),s._v(" tienen un ancho que se distribuye en proporción.")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fixed")]),t("td",[s._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string/boolean")]),t("td",[s._v("true/left/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-header")]),t("td",[s._v("Función de renderizado para la cabecera de la tabla de esta columna")]),t("td",[s._v("Function(h, { column, $index })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sortable")]),t("td",[s._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),t("code",{pre:!0},[s._v("custom")]),s._v(" y escucha al evento de tabla "),t("code",{pre:!0},[s._v("sort-change")])]),t("td",[s._v("boolean, string")]),t("td",[s._v("true, false, custom")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sort-method")]),t("td",[s._v("método de ordenamiento, funciona cuando "),t("code",{pre:!0},[s._v("sortable")]),s._v(" está en "),t("code",{pre:!0},[s._v("true")]),s._v(". Debería devolver un número, al igual que Array.sort")]),t("td",[s._v("Function(a, b)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sort-by")]),t("td",[s._v("especifica por cual propiedad de va a ordenar, funciona cuando "),t("code",{pre:!0},[s._v("sortable")]),s._v(" es "),t("code",{pre:!0},[s._v("true")]),s._v(" y "),t("code",{pre:!0},[s._v("sort-method")]),s._v(" es "),t("code",{pre:!0},[s._v("undefined")]),s._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),t("td",[s._v("Function(row, index)/String/Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sort-orders")]),t("td",[s._v("the order of the sorting strategies used when sorting the data, works when "),t("code",{pre:!0},[s._v("sortable")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),t("td",[s._v("array")]),t("td",[s._v("the elements in the array need to be one of the following: "),t("code",{pre:!0},[s._v("ascending")]),s._v(", "),t("code",{pre:!0},[s._v("descending")]),s._v(" and "),t("code",{pre:!0},[s._v("null")]),s._v(" (restores to the original order)")]),t("td",[s._v("['ascending', 'descending', null]")])]),t("tr",[t("td",[s._v("resizable")]),t("td",[s._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),t("code",{pre:!0},[s._v("border")]),s._v(" de "),t("code",{pre:!0},[s._v("el-table")]),s._v(" está en "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("formatter")]),t("td",[s._v("función que formatea el contenido de la celda")]),t("td",[s._v("Function(row, column, cellValue, index)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-overflow-tooltip")]),t("td",[s._v("especifica si el "),t("em",[s._v("tooltip")]),s._v(" debe ocultarse o mostrarse al hacer "),t("em",[s._v("hover")]),s._v(" en la celda")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("string")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")])]),t("tr",[t("td",[s._v("header-align")]),t("td",[s._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),t("td",[s._v("String")]),t("td",[s._v("left/center/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("class-name")]),t("td",[s._v("nombre de clase de la celda en la columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-class-name")]),t("td",[s._v("nombre de clase de la etiqueta de esta columna")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("selectable")]),t("td",[s._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" esta en "),t("code",{pre:!0},[s._v("selection")])]),t("td",[s._v("Function(row, index)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("reserve-selection")]),t("td",[s._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" está en "),t("code",{pre:!0},[s._v("selection")]),s._v(". Note that "),t("code",{pre:!0},[s._v("row-key")]),s._v(" is required for this to work")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filters")]),t("td",[s._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),t("code",{pre:!0},[s._v("text")]),s._v(" y "),t("code",{pre:!0},[s._v("value")]),s._v(" son obligatorios")]),t("td",[s._v("Array[{ text, value }]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-placement")]),t("td",[s._v("colocación para el menu desplegable del filtro")]),t("td",[s._v("String")]),t("td",[s._v("same as Tooltip's "),t("code",{pre:!0},[s._v("placement")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-multiple")]),t("td",[s._v("especifica si el filtrado de datos soporta múltiples opciones")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("método para filtrado de datos. Si "),t("code",{pre:!0},[s._v("filter-multiple")]),s._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("Function(value, row, column)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filtered-value")]),t("td",[s._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),t("code",{pre:!0},[s._v("render-header")])]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"table-column-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("—")]),a("td",[this._v("Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index }")])]),a("tr",[a("td",[this._v("header")]),a("td",[this._v("Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index }")])])])])}],!1,null,null,null);l.options.__file="table.md";a.default=l.exports},function(s,a,t){"use strict";t.r(a);var e={data:function(){return{value1:!0,value2:!0,value3:!0,value4:!0,value5:"100",value6:!0,value7:!1}}},r=(t(534),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value1">\n</el-switch>\n<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">\n</el-switch>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}}),t("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("p",[s._v("Enlace "),t("code",[s._v("v-model")]),s._v(" a una variable de tipo "),t("code",[s._v("Boolean")]),s._v(". Los atributos "),t("code",[s._v("active-color")]),s._v(" y "),t("code",[s._v("inactive-color")]),s._v(" deciden el color de fondo en cada estado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" active-text="Pay by month" inactive-text="Pay by year">\n</el-switch>\n<el-switch style="display: block" v-model="value4" active-color="#13ce66" inactive-color="#ff4949" active-text="Pay by month" inactive-text="Pay by year">\n</el-switch>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: true,\n        value4: true\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}}),t("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("p",[s._v("Puede agregar los atributos "),t("code",[s._v("active-text")]),s._v(" y "),t("code",[s._v("inactive-text")]),s._v(" para mostrar los textos.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: block"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n  <el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: '100'\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[t("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)],1),t("p",[s._v("Puede establecer los atributos "),t("code",[s._v("active-value")]),s._v(" y "),t("code",[s._v("inactive-value")]),s._v(". Ambos reciben valores de tipo "),t("code",[s._v("Boolean")]),s._v(", "),t("code",[s._v("String")]),s._v(" o "),t("code",[s._v("Number")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":content")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'Switch value: ' + value5\"")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value6" disabled>\n</el-switch>\n<el-switch v-model="value7" disabled>\n</el-switch>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value6: true,\n        value7: false\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}}),t("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1),t("p",[s._v("Agregar el atributo "),t("code",[s._v("disabled")]),s._v(" desactiva el componente Switch.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),t("p",[s._v("después de cambiar")]),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"texto-de-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto de descripción")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de valores extendidos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si Switch esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del componente Switch")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("40")])]),t("tr",[t("td",[s._v("active-icon-class")]),t("td",[s._v("nombre de la clase del icono mostrado en el estado "),t("code",{pre:!0},[s._v("on")]),s._v(", sobreescribe "),t("code",{pre:!0},[s._v("active-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inactive-icon-class")]),t("td",[s._v("nombre de la clase del icono mostrado en el estado "),t("code",{pre:!0},[s._v("off")]),s._v(", sobreescribe "),t("code",{pre:!0},[s._v("inactive-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("active-text")]),t("td",[s._v("texto mostrado en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inactive-text")]),t("td",[s._v("texto mostrado en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("active-value")]),t("td",[s._v("cambia su valor cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("inactive-value")]),t("td",[s._v("cambia su valor cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("active-color")]),t("td",[s._v("color de fondo cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("on")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])]),t("tr",[t("td",[s._v("inactive-color")]),t("td",[s._v("color de fondo cuando se encuentra en el estado "),t("code",{pre:!0},[s._v("off")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C0CCDA")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("nombre de entrada del componente Switch")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre del evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("se dispara cuando el valor cambia")]),a("td",[this._v("valor")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[this._v("focus")]),a("td",[this._v("foco al componente Switch")]),a("td",[this._v("—")])])])])}],!1,null,null,null);l.options.__file="switch.md";a.default=l.exports},,function(s,a,t){"use strict";t.r(a);var e={methods:{hello:function(){alert("Hello World!")}}},r=(t(500),t(0)),l=Object(r.a)(e,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Mostrar mensajes de alertas importantes.")]),s._m(1),t("p",[s._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="success alert" type="success">\n  </el-alert>\n  <el-alert title="info alert" type="info">\n  </el-alert>\n  <el-alert title="warning alert" type="warning">\n  </el-alert>\n  <el-alert title="error alert" type="error">\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),t("el-alert",{attrs:{title:"info alert",type:"info"}}),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),t("p",[s._v("Alert provee 4 tipos de temas definidos por "),t("code",[s._v("type")]),s._v(", el valor por defecto es "),t("code",[s._v("info")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="unclosable alert" type="success" :closable="false">\n  </el-alert>\n  <el-alert title="customized close-text" type="info" close-text="Gotcha">\n  </el-alert>\n  <el-alert title="alert with callback" type="warning" @close="hello">\n  </el-alert>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),t("p",[s._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),t("code",[s._v("closable")]),s._v(" define si el componente puede cerrarse o no. Acepta un "),t("code",[s._v("boolean")]),s._v(", que por defecto es "),t("code",[s._v("true")]),s._v(". También puede configurar el atributo "),t("code",[s._v("close-text")]),s._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),t("code",[s._v("close-text")]),s._v(" debe ser un string. El evento "),t("code",[s._v("close")]),s._v(" se dispara cuando el componente se cierra.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"unclosable alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"customized close-text"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"alert with callback"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Mostrar un icono mejora la legibilidad.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="success alert" type="success" show-icon>\n  </el-alert>\n  <el-alert title="info alert" type="info" show-icon>\n  </el-alert>\n  <el-alert title="warning alert" type="warning" show-icon>\n  </el-alert>\n  <el-alert title="error alert" type="error" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),t("p",[s._v("Setear el atributo "),t("code",[s._v("show-icon")]),s._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="success alert" type="success" center="" show-icon>\n  </el-alert>\n  <el-alert title="info alert" type="info" center="" show-icon>\n  </el-alert>\n  <el-alert title="warning alert" type="warning" center="" show-icon>\n  </el-alert>\n  <el-alert title="error alert" type="error" center="" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Descripción incluye un mensaje con información más detallada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="with description" type="success" description="This is a description.">\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),t("p",[s._v("Además del atributo requerido "),t("code",[s._v("title")]),s._v(", se puede agregar el atributo "),t("code",[s._v("description")]),s._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"with description"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"This is a description."')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="success alert" type="success" description="more text description" show-icon>\n  </el-alert>\n  <el-alert title="info alert" type="info" description="more text description" show-icon>\n  </el-alert>\n  <el-alert title="warning alert" type="warning" description="more text description" show-icon>\n  </el-alert>\n  <el-alert title="error alert" type="error" description="more text description" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),t("p",[s._v("Finalmente este es un ejemplo utilizando icono y descripción.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización del botón de cerrar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"usar-iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usar iconos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"texto-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto centrado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Para centrar el texto utilice el atributo "),a("code",{pre:!0},[this._v("center")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con descripción")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilizando icono y descripción")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("título")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de componente")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("si se puede cerrar o no")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("si el texto debe estar centrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("close-text")]),t("td",[s._v("texto de cerrado personalizado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-icon")]),t("td",[s._v("si un icono del tipo de alerta se debe mostrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("title")]),a("td",[this._v("El contenido del título de alerta.")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre del evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[this._v("close")]),a("td",[this._v("Se dispara cuando la alerta se cierra")]),a("td",[this._v("—")])])])])}],!1,null,null,null);l.options.__file="alert.md";a.default=l.exports},,function(s,a,t){"use strict";t.r(a);t(501);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Marcas en forma de número o estado para botones e iconos.")]),s._m(1),t("p",[s._v("Muestra la cantidad de mensajes nuevos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12">\n    </el-badge></el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3">\n    </el-badge></el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:12}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:3}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),t("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    Click Me"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      comments\n      "),t("el-badge",{staticClass:"mark",attrs:{value:12}})],1),t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      replies\n      "),t("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),t("p",[s._v("La cantidad está definida por "),t("code",[s._v("value")]),s._v(" que acepta "),t("code",[s._v("Number")]),s._v(" o "),t("code",[s._v("String")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Click Me"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      comments\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      replies\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Se puede personalizar el valor máximo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("El valor máximo se define como "),t("code",[s._v("max")]),s._v(" el cual es un "),t("code",[s._v("Number")]),s._v(". Nota: solo funciona si "),t("code",[s._v("value")]),s._v(" es también un "),t("code",[s._v("Number")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Mostrar texto en vez de números.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("Cuando "),t("code",[s._v("value")]),s._v(" es un "),t("code",[s._v("String")]),s._v(", puede mostrar texto personalizado.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),t("p",[s._v("Use el atributo "),t("code",[s._v("is-dot")]),s._v(". Es un "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("query"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n  "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"valor-maximo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor máximo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"pequeno-punto-rojo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pequeño punto rojo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("valor a mostrar")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),t("code",{pre:!0},[s._v("value")]),s._v(" es un "),t("code",{pre:!0},[s._v("Number")])]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("is-dot")]),t("td",[s._v("si se debe mostrar un pequeño punto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hidden")]),t("td",[s._v("hidden badge")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de botón")]),t("td",[s._v("string")]),t("td",[s._v("primary / success / warning / danger / info")]),t("td",[s._v("—")])])])])}],!1,null,"56d9ad22",null);r.options.__file="badge.md";a.default=r.exports},function(s,a,t){"use strict";t.r(a);t(502);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Botones comúnmente usados.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-button>Default</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-button",[s._v("Default")]),t("el-button",{attrs:{type:"primary"}},[s._v("Primary")]),t("el-button",{attrs:{type:"success"}},[s._v("Success")]),t("el-button",{attrs:{type:"info"}},[s._v("Info")]),t("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger"}},[s._v("Danger")])],1),t("el-row",[t("el-button",{attrs:{plain:""}},[s._v("Plain")]),t("el-button",{attrs:{type:"primary",plain:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",plain:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",plain:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",plain:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",plain:""}},[s._v("Danger")])],1),t("el-row",[t("el-button",{attrs:{round:""}},[s._v("Round")]),t("el-button",{attrs:{type:"primary",round:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",round:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",round:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",round:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",round:""}},[s._v("Danger")])],1),t("el-row",[t("el-button",{attrs:{icon:"el-icon-search",circle:""}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),t("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),t("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),t("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),t("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1),t("p",[s._v("Use "),t("code",[s._v("type")]),s._v(", "),t("code",[s._v("plain")]),s._v(","),t("code",[s._v("round")]),s._v(" y "),t("code",[s._v("circle")]),s._v(" para definir estilos a los botones.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Primary"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Plain"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Primary"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Danger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Round"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Primary"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Danger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-check"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-star-off"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type="primary" disabled>Primary</el-button>\n  <el-button type="success" disabled>Success</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Warning</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type="primary" plain disabled>Primary</el-button>\n  <el-button type="success" plain disabled>Success</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Warning</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-button",{attrs:{disabled:""}},[s._v("Default")]),t("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",disabled:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",disabled:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",disabled:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",disabled:""}},[s._v("Danger")])],1),t("el-row",[t("el-button",{attrs:{plain:"",disabled:""}},[s._v("Plain")]),t("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("Primary")]),t("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("Success")]),t("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("Info")]),t("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("Danger")])],1)],1),t("p",[s._v("Use el atributo "),t("code",[s._v("disabled")]),s._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Plain"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Botones sin borde ni fondo.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"}},[s._v("Text Button")]),t("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")]),t("el-button",{attrs:{type:"primary"}},[s._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1),t("p",[s._v("Use el atributo "),t("code",[s._v("icon")]),s._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),t("code",[s._v("<i>")]),s._v(". También se pueden usar iconos custom.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("Previous Page")]),t("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),t("p",[s._v("Use el tag "),t("code",[s._v("<el-button-group>")]),s._v(" para agrupar sus botones.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("Previous Page"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),t("p",[s._v("Ajuste el atributo "),t("code",[s._v("loading")]),s._v(" a "),t("code",[s._v("true")]),s._v(" para mostrar el estado de descarga.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Loading"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-button>Default</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-button",[s._v("Default")]),t("el-button",{attrs:{size:"medium"}},[s._v("Medium")]),t("el-button",{attrs:{size:"small"}},[s._v("Small")]),t("el-button",{attrs:{size:"mini"}},[s._v("Mini")])],1),t("el-row",[t("el-button",{attrs:{round:""}},[s._v("Default")]),t("el-button",{attrs:{size:"medium",round:""}},[s._v("Medium")]),t("el-button",{attrs:{size:"small",round:""}},[s._v("Small")]),t("el-button",{attrs:{size:"mini",round:""}},[s._v("Mini")])],1)],1),t("p",[s._v("Use el atributo "),t("code",[s._v("size")]),s._v(" para setear tamaños adicionales con "),t("code",[s._v("medium")]),s._v(", "),t("code",[s._v("small")]),s._v(" or "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Medium"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Small"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Mini"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"boton-deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón deshabilitado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("El atributo "),a("code",{pre:!0},[this._v("disabled")]),this._v(" determina su un botón esta deshabilitado.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"boton-de-texto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de texto")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"boton-icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón icono")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"grupo-de-botones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de botones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"boton-de-descarga"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de descarga")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del botón")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de botón")]),t("td",[s._v("string")]),t("td",[s._v("primary / success / warning / danger / info / text")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("plain")]),t("td",[s._v("determinar si es o no un botón plano")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("round")]),t("td",[s._v("determinar si es o no un botón redondo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("circle")]),t("td",[s._v("determina si es un boton circular")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("determinar si es o no un botón de descarga")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("deshabilitar el botón")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("nombre de la clase del icono")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("misma funcionalidad que la nativa "),t("code",{pre:!0},[s._v("autofocus")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("native-type")]),t("td",[s._v("misma funcionalidad que la nativa "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("button / submit / reset")]),t("td",[s._v("button")])])])])}],!1,null,null,null);r.options.__file="button.md";a.default=r.exports},,,function(s,a,t){"use strict";t.r(a);t(509);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),s._m(1),t("p",[s._v("El color principal de Element es el azul brillante y amigable.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box bg-blue"},[s._v("Azul"),t("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),t("p",[s._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box bg-success"},[s._v("Éxito"),t("div",{staticClass:"value"},[s._v("#67C23A")])])]),t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box bg-warning"},[s._v("Precaución"),t("div",{staticClass:"value"},[s._v("#E6A23C")])])]),t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box bg-danger"},[s._v("Peligro"),t("div",{staticClass:"value"},[s._v("#F56C6C")])])]),t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),t("div",{staticClass:"value"},[s._v("#909399")])])])],1),s._m(3),t("p",[s._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("Texto primario"),t("div",{staticClass:"value"},[s._v("#303133")])]),t("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("Texto regular"),t("div",{staticClass:"value"},[s._v("#606266")])]),t("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("Texto secundario"),t("div",{staticClass:"value"},[s._v("#909399")])]),t("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("Texto de placeholder"),t("div",{staticClass:"value"},[s._v("#C0C4CC")])])])]),t("el-col",{attrs:{span:6,xs:{span:12}}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-border-base"},[s._v("Borde base"),t("div",{staticClass:"value"},[s._v("#DCDFE6")])]),t("div",{staticClass:"demo-color-box bg-border-light"},[s._v("Borde ligero"),t("div",{staticClass:"value"},[s._v("#E4E7ED")])]),t("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("Borde claro"),t("div",{staticClass:"value"},[s._v("#EBEEF5")])]),t("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("Borde extra claro"),t("div",{staticClass:"value"},[s._v("#F2F6FC")])])])])],1)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"color-principal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color principal")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"color-secundario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color secundario")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"color-neutro"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color neutro")])}],!1,null,null,null);r.options.__file="color.md";a.default=r.exports},,,function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"tema-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tema personalizado")]),t("p",[s._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),t("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cambiando el color del tema")]),t("p",[s._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),t("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[s._v("sitio de visualización de temas")]),s._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),t("p",[s._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),t("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[s._v("¶")]),s._v(" Actualizando variables SCSS en tu proyecto")]),t("p",[t("code",{pre:!0},[s._v("theme-chalk")]),s._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(":")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),t("p",[s._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-JS"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./element-variables.scss'")]),s._v("\n\nVue.use(Element)\n")])]),t("div",{staticClass:"tip"},[t("p",[s._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),t("h3",{attrs:{id:"cli-para-generar-temas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[s._v("¶")]),s._v(" CLI para generar temas")]),t("p",[s._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),t("h4",{attrs:{id:"instalacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Instalación")])]),t("p",[s._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),t("p",[s._v("Ahora, instale el tema "),t("code",{pre:!0},[s._v("chalk")]),s._v(" desde npm o Github.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-shell"}},[t("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("#")]),t("span",{pre:!0,attrs:{class:"bash"}},[s._v(" desde npm")]),s._v("\nnpm i element-theme-chalk -D\n"),t("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n#")]),t("span",{pre:!0,attrs:{class:"bash"}},[s._v(" desde GitHub")]),s._v("\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),t("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Inicializar archivo de variables")])]),t("p",[s._v("Después de haber instalado correctamente los paquetes, el comando "),t("code",{pre:!0},[s._v("et")]),s._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),t("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" en su lugar). Ejecute "),t("code",{pre:!0},[s._v("-i")]),s._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(". También puede especificar un directorio distinto.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("et -i [custom output file]\n"),t("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n>")]),t("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ Generator variables file")]),s._v("\n")])]),t("p",[s._v("En el archivo "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-css"}},[s._v("$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#409EFF")]),s._v(" !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 10%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 53a8ff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 20%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 66b1ff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 30%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 79bbff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 40%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 8cc5ff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 50%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* a0cfff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 60%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* b3d8ff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 70%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* c6e2ff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 80%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* d9ecff */")]),s._v("\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-9")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 90%) !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ecf5ff */")]),s._v("\n\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-success")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#67c23a")]),s._v(" !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-warning")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#e6a23c")]),s._v(" !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-danger")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#f56c6c")]),s._v(" !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-info")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#909399")]),s._v(" !"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n\n...\n")])]),t("h4",{attrs:{id:"modificando-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Modificando variables")])]),t("p",[s._v("Solo debe modificar el archivo "),t("code",{pre:!0},[s._v("element-variables.scss")]),s._v(", por ejemplo, para cambiar el color del tema a rojo:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-CSS"}},[s._v("$"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("red")]),s._v(";\n")])]),t("h4",{attrs:{id:"construyendo-el-tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Construyendo el tema")])]),t("p",[s._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),t("code",{pre:!0},[s._v("et")]),s._v(" para construir nuestro tema. Puedes activar el modo "),t("code",{pre:!0},[s._v("watch")]),s._v(" agregando el parámetro "),t("code",{pre:!0},[s._v("-w")]),s._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),t("code",{pre:!0},[s._v("-c")]),s._v(" seguido del nombre.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("et\n"),t("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n>")]),t("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ build theme font")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ build element theme")]),s._v("\n")])]),t("h4",{attrs:{id:"importar-un-tema-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Importar un tema personalizado")])]),t("p",[s._v("Por defecto, el archivo de tema construido es colocado dentro de "),t("code",{pre:!0},[s._v("./theme")]),s._v(". Puede especificar un directorio distinto utilizando el parámetro "),t("code",{pre:!0},[s._v("-o")]),s._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'../theme/index.css'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),t("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[s._v("¶")]),t("strong",[s._v("Importar un tema de componente bajo demanda")])]),t("p",[s._v("Si esta utilizando "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" para importar bajo demanda, solo debe modificar el archivo "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(" y especificar en la propiedad "),t("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(". "),t("strong",[s._v("Nota")]),s._v(" el carácter "),t("code",{pre:!0},[s._v("~")]),s._v(" es obligatorio:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-json"}},[s._v("{\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n    {\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),t("p",[s._v("Si no esta familiarizado con "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(", por favor diríjase a la documentación sobre "),t("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Como Iniciar")]),s._v(". Para más detalles, consulte el "),t("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("repositorio del proyecto")]),s._v(" de "),t("code",{pre:!0},[s._v("element-theme")]),s._v(".")])])}],!1,null,null,null);r.options.__file="custom-theme.md";a.default=r.exports},,function(s,a,t){"use strict";t.r(a);t(401);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("div",[e("h2",[s._v("Disciplinas de diseño")]),e("el-row",{staticClass:"cards",attrs:{gutter:14}},[e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(177),alt:"Consistency"}}),e("h4",[s._v("Consistencia")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(178),alt:"Feedback"}}),e("h4",[s._v("Comentarios")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(179),alt:"Efficiency"}}),e("h4",[s._v("Eficiencia")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(180),alt:"Controllability"}}),e("h4",[s._v("Control")]),e("span")])])],1),e("h3",[s._v("Consistencia")]),s._m(0),e("h3",[s._v("Comentarios")]),s._m(1),e("h3",[s._v("Eficiencia")]),s._m(2),e("h3",[s._v("Control")]),s._m(3)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("ul",[a("li",[a("strong",[this._v("Consistente con la vida real: ")]),this._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),a("li",[a("strong",[this._v("Consistente dentro de la interfaz: ")]),this._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("ul",[a("li",[a("strong",[this._v("Comentarios sobre la operación: ")]),this._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),a("li",[a("strong",[this._v("Comentarios visuales: ")]),this._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("ul",[a("li",[a("strong",[this._v("Simplifica el proceso: ")]),this._v("Mantiene el proceso operativo simple e intuitivo.")]),a("li",[a("strong",[this._v("Bien definido y claro: ")]),this._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),a("li",[a("strong",[this._v("Fácil de identificar: ")]),this._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("ul",[a("li",[a("strong",[this._v("Toma de decisiones: ")]),this._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),a("li",[a("strong",[this._v("Consecuencias controladas: ")]),this._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],!1,null,"2a761e6e",null);r.options.__file="design.vue";a.default=r.exports},function(s,a,t){"use strict";t.r(a);var e=[function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("div",{staticClass:"page-container page-resource"},[e("h2",[s._v("Recursos")]),e("p",[s._v("Se están desarrollando más recursos")]),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(203),alt:""}}),e("h3",[s._v("Componetes de Axure")]),e("p",[s._v("Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.")]),e("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[s._v("Descarga")])])]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:t(204),alt:""}}),e("h3",[s._v("Plantilla de Sketch")]),e("p",[s._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),e("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[s._v("Descarga")])])])])])])}],r=(t(405),t(0)),l=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},e,!1,null,"02fce3ab",null);l.options.__file="resource.vue";a.default=l.exports},,,,,,function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"inicio-rapido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inicio rápido")]),t("p",[s._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),t("h3",{attrs:{id:"use-vue-cli-at-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-at-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use vue-cli@3")]),t("p",[s._v("We provide an "),t("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[s._v("Element plugin")]),s._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),t("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Usa la plantilla de Kit de inicio")]),t("p",[s._v("Proveemos una plantilla general "),t("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(". Para los usuarios de Laravel, también tenemos "),t("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("template")]),s._v(". Puedes descargarlas y agregarlas directamente también.")]),t("p",[s._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),t("h3",{attrs:{id:"importando-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importando Element")]),t("p",[s._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),t("h4",{attrs:{id:"importando-todo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importando todo")]),t("p",[s._v("In main.js:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v(";\n\nVue.use(ElementUI);\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n});\n")])]),t("p",[s._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),t("h4",{attrs:{id:"en-demanda"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[s._v("¶")]),s._v(" En demanda")]),t("p",[s._v("Con la ayuda de "),t("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),t("p",[s._v("Primero, instale babel-plugin-component:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),t("p",[s._v("Luego edite .babelrc:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-json"}},[s._v("{\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [\n    [\n      "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(",\n      {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"theme-chalk"')]),s._v("\n      }\n    ]\n  ]\n}\n")])]),t("p",[s._v("Luego, si necesita Button y Select, edite main.js:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v(";\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n});\n")])]),t("p",[s._v("Ejemplo completo (Referencia completa de componentes "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[s._v("components.json")]),s._v(")")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),t("h3",{attrs:{id:"configuracion-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[s._v("¶")]),s._v(" Configuración global")]),t("p",[s._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: "),t("code",{pre:!0},[s._v("size")]),s._v(", "),t("code",{pre:!0},[s._v("zIndex")]),s._v(". "),t("code",{pre:!0},[s._v("size")]),s._v(" define el tamaño por defecto de todos los componentes. The property "),t("code",{pre:!0},[s._v("zIndex")]),s._v(" sets the initial z-index (default: 2000) for modal boxes:")]),t("p",[s._v("Importando Element completamente：")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-js"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\nVue.use(Element, { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zIndex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" });\n")])]),t("p",[s._v("Importando Element parcialmente：")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-js"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n\nVue.prototype.$ELEMENT = { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zIndex")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" };\nVue.use(Button);\n")])]),t("p",[s._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),t("code",{pre:!0},[s._v("size")]),s._v(" será "),t("code",{pre:!0},[s._v("small")]),s._v(". The initial z-index of modal boxes is 3000.")]),t("h3",{attrs:{id:"empiece-ya"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[s._v("¶")]),s._v(" Empiece ya!")]),t("p",[s._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")]),t("h3",{attrs:{id:"use-nuxt-js"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Nuxt.js")]),t("p",[s._v("También podemos comenzar un proyecto usando "),t("a",{attrs:{href:"nuxtjs.org"}},[s._v("Nuxt.js")]),s._v(":")]),t("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[t("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);r.options.__file="quickstart.md";a.default=r.exports},,function(s,a,t){"use strict";t.r(a);t(529);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{percentage:0}}),t("el-progress",{attrs:{percentage:70}}),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),t("el-progress",{attrs:{percentage:100,status:"success"}}),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1),t("p",[s._v("Usa el atributo "),t("code",[s._v("percentage")]),s._v(" para asignar el porcentage. Este es "),t("strong",[s._v("requerido")]),s._v(" y tiene que ser un valor entre "),t("code",[s._v("0-100")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#8e71c7"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("En este caso el porcentage no toma espacio adicional.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),t("p",[s._v("El atributo "),t("code",[s._v("stroke-width")]),s._v(" decide el ancho de la barra de progreso, y usa el atributo "),t("code",[s._v("text-inside")]),s._v(" para poner la descripción dentro de la misma.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rgba(142, 113, 199, 0.7)"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{type:"circle",percentage:0}}),t("el-progress",{attrs:{type:"circle",percentage:25}}),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[s._v("Done")])],1),t("p",[s._v("Puede asignar el atributo "),t("code",[s._v("type")]),s._v(" como "),t("code",[s._v("circle")]),s._v(" para usar la barra circular de progreso, y usar el atributo "),t("code",[s._v("width")]),s._v(" para cambiar el tamaño del círculo.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#8e71c7"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Done"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"progreso"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progreso")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage externo)")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage interno)")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"barra-de-progreso-circular"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso circular")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("percentage")]),t("td",[s._v("porcentaje, requerido")]),t("td",[s._v("number")]),t("td",[s._v("0-100")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de barra de progreso")]),t("td",[s._v("string")]),t("td",[s._v("line/circle")]),t("td",[s._v("line")])]),t("tr",[t("td",[s._v("stroke-width")]),t("td",[s._v("ancho de la barra de progreso")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("6")])]),t("tr",[t("td",[s._v("text-inside")]),t("td",[s._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),t("code",{pre:!0},[s._v("type")]),s._v(" es 'line'")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("estado actual de la barra de progreso")]),t("td",[s._v("string")]),t("td",[s._v("success/exception/text")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("color")]),t("td",[s._v("color de fondo de la barra de progreso. Sobreescribe la propiedad "),t("code",{pre:!0},[s._v("status")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("ancho del canvas que contiene la barra de progreso circula")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("126")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("mostrar porcentaje")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])}],!1,null,null,null);r.options.__file="progress.md";a.default=r.exports},,,,,function(s,a,t){"use strict";t.r(a);t(543);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tipografía")]),t("p",[s._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),t("h3",{attrs:{id:"fuente-en-chino"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente-en-chino","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fuente en chino")]),t("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),t("div",{staticClass:"name"},[s._v("PingFang SC")])]),t("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),t("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),t("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),t("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),t("h3",{attrs:{id:"ingles-fuente-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingles-fuente-numerica","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inglés / Fuente Numérica")]),t("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),t("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),t("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),t("div",{staticClass:"name"},[s._v("Helvetica")])]),t("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),t("div",{staticClass:"name"},[s._v("Arial")])]),t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-css"}},[t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("sans-serif")]),s._v(";\n")])]),t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Convención de fuentes")]),t("table",{staticClass:"demo-typo-size"},[t("tbody",[t("tr",[t("td",{staticClass:"h1"},[s._v("Main Title")]),t("td",{staticClass:"h1"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),t("tr",[t("td",{staticClass:"h2"},[s._v("Title")]),t("td",{staticClass:"h2"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),t("tr",[t("td",{staticClass:"h3"},[s._v("Small Title")]),t("td",{staticClass:"h3"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),t("tr",[t("td",{staticClass:"text-regular"},[s._v("Body")]),t("td",{staticClass:"text-regular"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),t("tr",[t("td",{staticClass:"text-small"},[s._v("Body (small)")]),t("td",{staticClass:"text-small"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),t("tr",[t("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),t("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],!1,null,null,null);r.options.__file="typography.md";a.default=r.exports},,,,,,,function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"internacionalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internacionalización")]),t("p",[s._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),t("p",[s._v("O si está importando Element a petición:")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),t("p",[s._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),t("code",{pre:!0},[s._v("NormalModuleReplacementPlugin")]),s._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),t("p",[s._v("webpack.config.js")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[s._v("{\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),t("span",{pre:!0,attrs:{class:"hljs-regexp"}},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),t("h2",{attrs:{id:"compatible-con-vue-i18n-at-5-x"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-at-5-x","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con "),t("code",{pre:!0},[s._v("vue-i18n@5.x")])]),t("p",[s._v("Element es compatible con "),t("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", lo que facilita aún más la conmutación multilingüe.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", enLocale)\n")])]),t("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con otros plugins i18n")]),t("p",[s._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n  }\n})\n")])]),t("h2",{attrs:{id:"compatible-con-vue-i18n-at-6-x"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-at-6-x","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible con "),t("code",{pre:!0},[s._v("vue-i18n@6.x")])]),t("p",[s._v("Necesita manejarlo manualmente para ser compatible con "),t("code",{pre:!0},[s._v("6.x")]),s._v(".")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n    ...enLocale "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n  },\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n    ...zhLocale "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n  }\n}\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n  messages, "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),t("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Personalización de i18n en componentes bajo petición")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-js"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n    ...enLocale\n  },\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n    ...zhLocale\n  }\n}\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n  messages, "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),t("h2",{attrs:{id:"importar-via-cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Importar via CDN")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("Compatible con "),t("code",{pre:!0},[s._v("vue-i18n")])]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"actionscript"}},[s._v("\n  Vue.locale("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("Actualmente Element está disponible en los siguientes idiomas:")]),t("ul",{staticClass:"language-list"},[t("li",[s._v("Simplified Chinese (zh-CN)")]),t("li",[s._v("English (en)")]),t("li",[s._v("German (de)")]),t("li",[s._v("Portuguese (pt)")]),t("li",[s._v("Spanish (es)")]),t("li",[s._v("Danish (da)")]),t("li",[s._v("French (fr)")]),t("li",[s._v("Norwegian (nb-NO)")]),t("li",[s._v("Traditional Chinese (zh-TW)")]),t("li",[s._v("Italian (it)")]),t("li",[s._v("Korean (ko)")]),t("li",[s._v("Japanese (ja)")]),t("li",[s._v("Dutch (nl)")]),t("li",[s._v("Vietnamese (vi)")]),t("li",[s._v("Russian (ru-RU)")]),t("li",[s._v("Turkish (tr-TR)")]),t("li",[s._v("Brazilian Portuguese (pt-br)")]),t("li",[s._v("Farsi (fa)")]),t("li",[s._v("Thai (th)")]),t("li",[s._v("Indonesian (id)")]),t("li",[s._v("Bulgarian (bg)")]),t("li",[s._v("Polish (pl)")]),t("li",[s._v("Finnish (fi)")]),t("li",[s._v("Swedish (sv-SE)")]),t("li",[s._v("Greek (el)")]),t("li",[s._v("Slovak (sk)")]),t("li",[s._v("Catalunya (ca)")]),t("li",[s._v("Czech (cs-CZ)")]),t("li",[s._v("Ukrainian (ua)")]),t("li",[s._v("Turkmen (tk)")]),t("li",[s._v("Tamil (ta)")]),t("li",[s._v("Latvian (lv)")]),t("li",[s._v("Afrikaans (af-ZA)")]),t("li",[s._v("Estonian (ee)")]),t("li",[s._v("Slovenian (sl)")]),t("li",[s._v("Arabic (ar)")]),t("li",[s._v("Hebrew (he)")]),t("li",[s._v("Lithuanian (lt)")]),t("li",[s._v("Mongolian (mn)")]),t("li",[s._v("Kazakh (kz)")]),t("li",[s._v("Hungarian (hu)")]),t("li",[s._v("Romanian (ro)")]),t("li",[s._v("Kurdish (ku)")]),t("li",[s._v("Uighur (ug-CN)")]),t("li",[s._v("Khmer (km)")]),t("li",[s._v("Serbian (sr)")]),t("li",[s._v("Vasco (eu)")]),t("li",[s._v("Kirguizstán (kg)")])]),t("p",[s._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada  "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[s._v("aqui")]),s._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null);r.options.__file="i18n.md";a.default=r.exports},function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[s._v("promotion management")])]),t("el-breadcrumb-item",[s._v("promotion list")]),t("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),t("p",[s._v("En "),t("code",[s._v("el-breadcrumb")]),s._v(", cada "),t("code",[s._v("el-breadcrumb-item")]),s._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),t("code",[s._v("String")]),s._v(" llamado "),t("code",[s._v("separator")]),s._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("promotion management"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),t("el-breadcrumb-item",[s._v("promotion management")]),t("el-breadcrumb-item",[s._v("promotion list")]),t("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),t("p",[s._v("Setee "),t("code",[s._v("separator-class")]),s._v(" para que utilice "),t("code",[s._v("iconfont")]),s._v(" como separador，el mismo va a cubrir "),t("code",[s._v("separator")])]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("separator-class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"icono-separador"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icono separador")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"breadcrumb-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("separator")]),t("td",[s._v("caracter separador")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("/")])]),t("tr",[t("td",[s._v("separator-class")]),t("td",[s._v("nombre de la clase del icono separador")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"breadcrumb-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("to")]),t("td",[s._v("ruta del link, lo mismo que "),t("code",{pre:!0},[s._v("to")]),s._v(" de "),t("code",{pre:!0},[s._v("vue-router")])]),t("td",[s._v("string/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("replace")]),t("td",[s._v("si "),t("code",{pre:!0},[s._v("true")]),s._v(",  la navegación no dejara una entrada en la historia")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";a.default=r.exports},,,,function(s,a,t){"use strict";t.r(a);t(522);var e=t(0),r=Object(e.a)({},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),s._m(1),t("p",[s._v("Crea un layout básico usando columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\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-light"></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-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-col",{attrs:{span:24}},[t("div",{staticClass:"grid-content bg-purple-dark"})])],1),t("el-row",[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("p",[s._v("Con "),t("code",[s._v("row")]),s._v(" y "),t("code",[s._v("col")]),s._v(", puede facilmente manipular el layout usando el atributo "),t("code",[s._v("span")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("El espaciado de columnas está soportado.")]),t("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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Row provee el atributo "),t("code",[s._v("gutter")]),s._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Puedes especificar offsets para las columnas.")]),t("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" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Puedes especificar el offset para una columna mediante el atributo "),t("code",[s._v("offset")]),s._v(" de Col.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Usa flex layout para un alineamiento flexible de columnas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row type="flex" class="row-bg">\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-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\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-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\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-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\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-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\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-light"></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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Puede habilitar flex layout asignando el atributo "),t("code",[s._v("type")]),s._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),t("code",[s._v("justify")]),s._v(" con los valores start, center, end, space-between o space-around.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"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")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\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"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),s._m(8),t("p",[s._v("Las clases son:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"layout-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"espaciado-de-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espaciado de columnas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"layout-hibrido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout híbrido")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"offset-de-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Offset de columnas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"alineacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineación")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clases útiles para ocultar elementos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui/lib/theme-chalk/display.css'")]),this._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("code",{pre:!0},[s._v("hidden-xs-only")]),s._v(" - oculto en viewports extra pequeños solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-only")]),s._v(" - oculto en viewports pequeños solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-and-down")]),s._v(" - oculto en viewports pequeños y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-sm-and-up")]),s._v(" - oculto en viewports pequeños y superiores")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-only")]),s._v(" - oculto en viewports medios solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-and-down")]),s._v(" - oculto en viewports medios y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-md-and-up")]),s._v(" - oculto en viewports medios y mayores")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-only")]),s._v(" - ocultos en viewports grandes solamente")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-and-down")]),s._v(" - ocultos en viewports grandes y menores")]),t("li",[t("code",{pre:!0},[s._v("hidden-lg-and-up")]),s._v(" - ocultos en viewports grandes y superiores")]),t("li",[t("code",{pre:!0},[s._v("hidden-xl-only")]),s._v(" - oculto en viewports extra grandes solamente")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Row")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Valor por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("gutter")]),t("td",[s._v("espaciado de la grilla")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("justify")]),t("td",[s._v("alineación horizontal del layout flex")]),t("td",[s._v("string")]),t("td",[s._v("start/end/center/space-around/space-between")]),t("td",[s._v("start")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación vertical del layout flex")]),t("td",[s._v("string")]),t("td",[s._v("top/middle/bottom")]),t("td",[s._v("top")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("tag de elemento propio")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-col"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Col")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Valor por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("span")]),t("td",[s._v("número de columnas que abarca la cuadrícula")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("24")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("especific espacio en el lado izquierdo de la grill")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("push")]),t("td",[s._v("número de columnas que la grilla se mueve hacia la derecha")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("pull")]),t("td",[s._v("número de columnas que la grilla se mueve hacia la izquierda")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("xs")]),t("td",[t("code",{pre:!0},[s._v("<768px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sm")]),t("td",[t("code",{pre:!0},[s._v("≥768px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("md")]),t("td",[t("code",{pre:!0},[s._v("≥992px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lg")]),t("td",[t("code",{pre:!0},[s._v("≥1200px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("xl")]),t("td",[t("code",{pre:!0},[s._v("≥1920px")]),s._v(" Columnas responsive u objeto con propiedades de la columna")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("tag de elemento propio")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";a.default=r.exports},function(s,a,t){"use strict";t.r(a);var e=t(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"instalacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Instalación")]),t("h3",{attrs:{id:"npm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),t("p",[s._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),t("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("npm i element-ui -S\n")])]),t("h3",{attrs:{id:"cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),t("p",[s._v("Obtenga la última versión desde "),t("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , e importe el JavaScript y los archivos CSS en su página.")]),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"undefined"}}),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),t("a",{attrs:{href:"https://unpkg.com"}},[s._v("unpkg.com")]),s._v(" para más información.")]),t("h3",{attrs:{id:"hello-world"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),t("p",[s._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),t("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/14/"}},[s._v("Online Demo")])]),t("iframe",{attrs:{width:"100%",height:"600",src:"//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/",allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),t("p",[s._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: "),t("a",{attrs:{href:"/#/es/component/quickstart"}},[s._v("Quick Start")])])])}],!1,null,null,null);r.options.__file="installation.md";a.default=r.exports},,,function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Selección única entre múltiples opciones.")]),s._m(1),t("p",[s._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(a){s.radio=a},expression:"radio"}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2"},model:{value:s.radio,callback:function(a){s.radio=a},expression:"radio"}},[s._v("Option B")])]],2),t("p",[s._v("Crear un elemento Radio es fácil, solo necesita enlazar("),t("code",[s._v("bind")]),s._v(") una variable a la directiva "),t("code",[s._v("v-model")]),s._v(" del Radio. Va a ser igual al valor "),t("code",[s._v("label")]),s._v(" del Radio seleccionado. El tipo de dato de "),t("code",[s._v("label")]),s._v(" es "),t("code",[s._v("String")]),s._v(", "),t("code",[s._v("Number")]),s._v(" o "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio1: 'selected and disabled'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("Option A")]),t("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("Option B")])]],2),t("p",[s._v("Solo necesita agregar el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="radio2">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-radio-group",{model:{value:s.radio2,callback:function(a){s.radio2=a},expression:"radio2"}},[t("el-radio",{attrs:{label:3}},[s._v("Option A")]),t("el-radio",{attrs:{label:6}},[s._v("Option B")]),t("el-radio",{attrs:{label:9}},[s._v("Option C")])],1)],1),t("p",[s._v("Combine "),t("code",[s._v("el-radio-group")]),s._v(" con "),t("code",[s._v("el-radio")]),s._v(" para mostrar un grupo de Radios. Enlace la variable con "),t("code",[s._v("v-model")]),s._v(" del elemento "),t("code",[s._v("el-radio-group")]),s._v(" y asigne el valor del "),t("code",[s._v("label")]),s._v(" en "),t("code",[s._v("el-radio")]),s._v(". Se provee el evento "),t("code",[s._v("change")]),s._v(" con el valor actual como parámetro.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio2"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),s._v("Option C"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Radio con estilo de botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-radio-group v-model="radio3">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="medium">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio5" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio6" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio3: 'New York',\n        radio4: 'New York',\n        radio5: 'New York',\n        radio6: 'New York'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-radio-group",{model:{value:s.radio3,callback:function(a){s.radio3=a},expression:"radio3"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(a){s.radio4=a},expression:"radio4"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(a){s.radio5=a},expression:"radio5"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(a){s.radio6=a},expression:"radio6"}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles"}}),t("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2),t("p",[s._v("Solo necesita cambiar el elemento "),t("code",[s._v("el-radio")]),s._v(" a "),t("code",[s._v("el-radio-button")]),s._v(". Se provee el atributo "),t("code",[s._v("size")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio3"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(" >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio9" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio10" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio7: '1',\n        radio8: '1',\n        radio9: '1',\n        radio10: '1'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(a){s.radio7=a},expression:"radio7"}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(a){s.radio7=a},expression:"radio7"}},[s._v("Option B")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(a){s.radio8=a},expression:"radio8"}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(a){s.radio8=a},expression:"radio8"}},[s._v("Option B")])],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(a){s.radio9=a},expression:"radio9"}},[t("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("Option B")])],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(a){s.radio10=a},expression:"radio10"}},[t("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),t("el-radio",{attrs:{label:"2",border:""}},[s._v("Option B")])],1)],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("border")]),s._v(" agrega un borde al elemento Radio.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio9"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio10"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio9")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio10")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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),s._m(13),s._m(14),s._m(15),s._m(16)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Deshabilitado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("El atributo "),a("code",{pre:!0},[this._v("disabled")]),this._v(" es utilizado para deshabilitar un Radio.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"grupo-de-elementos-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de elementos Radio")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"estilo-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo Button")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("el valor del Radio")]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Radio está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("agregar borde alrededor del elemento Radio")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del elemento Radio, solo funciona si "),t("code",{pre:!0},[s._v("border")]),s._v(" es verdadero")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo nativo 'name'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-radio-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("el valor del Radio")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si el Radio está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo nativo 'name'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores Aceptado")]),t("th",[s._v("Valores por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de los "),t("code",{pre:!0},[s._v("radio buttons")]),s._v(" o "),t("code",{pre:!0},[s._v("bordered radios")])]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si la anidación de radios está desahabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de las letras cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("color del borde y fondo cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("el valor del "),t("code",{pre:!0},[s._v("label")]),s._v(" del Radio seleccionado")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el valor cambia")]),t("td",[s._v("el valor del "),t("code",{pre:!0},[s._v("label")]),s._v(" del Radio seleccionado")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Muestra un mensaje de notificación global en una esquina de la página.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open">\n    Closes automatically\n  </el-button>\n  <el-button plain @click="open2">\n    Won\'t close automatically\n    </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    Closes automatically\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    Won't close automatically\n    ")])]],2),t("p",[s._v("Element ha registrado el método"),t("code",[s._v("$notify")]),s._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),t("code",[s._v("title")]),s._v(" y el campo de "),t("code",[s._v("message")]),s._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),t("code",[s._v("duration")]),s._v("  se puede controlar su duración. Específicamente, si está configurado en "),t("code",[s._v("0")]),s._v(", no se cerrará automáticamente. Tenga en cuenta que "),t("code",[s._v("duration")]),s._v(" recibe un "),t("code",[s._v("Number")]),s._v(" en milisegundos.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n    Closes automatically\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n    Won't close automatically\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a reminder'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Prompt'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message that does not automatically close'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open3">\n    Success\n  </el-button>\n  <el-button plain @click="open4">\n    Warning\n  </el-button>\n  <el-button plain @click="open5">\n    Info\n  </el-button>\n  <el-button plain @click="open6">\n    Error\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    Success\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    Warning\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    Info\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    Error\n  ")])]],2),t("p",[s._v("Element proporciona cuatro tipos de notificación: "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("warning")]),s._v(", "),t("code",[s._v("info")]),s._v(" y "),t("code",[s._v("error")]),s._v(". Se definen por el campo "),t("code",[s._v("type")]),s._v("  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),t("code",[s._v("open5")]),s._v(" y "),t("code",[s._v("open6")]),s._v(" sin pasar un campo "),t("code",[s._v("type")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n    Success\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n    Warning\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n    Info\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n    Error\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open3() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a warning message'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is an info message'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Error'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is an error message'")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("La notificación puede surgir de cualquier rincón que uno desee.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open7">\n    Top Right\n  </el-button>\n  <el-button plain @click="open8">\n    Bottom Right\n  </el-button>\n  <el-button plain @click="open9">\n    Bottom Left\n  </el-button>\n  <el-button plain @click="open10">\n    Top Left\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open8() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open9() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open10() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    Top Right\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n    Bottom Right\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n    Bottom Left\n  ")]),t("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n    Top Left\n  ")])]],2),t("p",[s._v("El atributo "),t("code",[s._v("position")]),s._v(" define desde qué esquina se desliza la notificación. Puede ser "),t("code",[s._v("top-right")]),s._v(", "),t("code",[s._v("top-left")]),s._v(", "),t("code",[s._v("bottom-right")]),s._v(" o "),t("code",[s._v("bottom-left")]),s._v(". Predeterminado: "),t("code",[s._v("top-right")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n    Top Right\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("\n    Bottom Right\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open9"')]),s._v(">")]),s._v("\n    Bottom Left\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open10"')]),s._v(">")]),s._v("\n    Top Left\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open7() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top right corner'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom right corner'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'bottom-right'")]),s._v("\n        });\n      },\n\n      open9() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom left corner'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'bottom-left'")]),s._v("\n        });\n      },\n\n      open10() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top left corner'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top-left'")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open11">\n    Notification with offset\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open11() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n    Notification with offset\n  ")])]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("offset")]),s._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open11"')]),s._v(">")]),s._v("\n    Notification with offset\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open11() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open12">\n    Use HTML String\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open12() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n    Use HTML String\n  ")])]],2),t("p",[s._v("Configure "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" a true y "),t("code",[s._v("message")]),s._v(" se tratará como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open12"')]),s._v(">")]),s._v("\n    Use HTML String\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open12() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'<strong>This is <i>HTML</i> string</strong>'")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("p",[s._v("Es posible ocultar el botón de cerrar")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open13">\n    Hide close button\n    </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open13() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n    Hide close button\n    ")])]],2),t("p",[s._v("Configure el atributo "),t("code",[s._v("showClose")]),s._v(" como "),t("code",[s._v("false")]),s._v(" para que el usuario no pueda cerrar la notificación.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open13"')]),s._v(">")]),s._v("\n    Hide close button\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open13() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message without close button'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tipos-de-notificaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de notificaciones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"posicion-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posicion personalizada")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"desplazamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplazamiento")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"usando-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usando cadenas HTML")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("ataques XSS")]),s._v(". Por lo tanto, cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),t("strong",[s._v("nunca")]),s._v(" asigne "),t("code",{pre:!0},[s._v("message")]),s._v(" al contenido proporcionado por el usuario.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultar boton de cerrar")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodo-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodo global")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Element ha añadido un método global "),a("code",{pre:!0},[this._v("$notify")]),this._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),a("code",{pre:!0},[this._v("Notification")]),this._v(" como lo hacemos en esta página.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"importar-localmente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importar localmente")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Importar "),a("code",{pre:!0},[this._v("Notification")]),this._v(":")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Notification } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("En este caso, debe llamar a "),a("code",{pre:!0},[this._v("Notification(options)")]),this._v(". También se han registrado métodos para diferentes tipos, e.j. "),a("code",{pre:!0},[this._v("Notification.success(options)")]),this._v(". Puede llamar al metodo "),a("code",{pre:!0},[this._v("Notification.closeAll()")]),this._v(" para cerrar manualmente todas las instancias.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("titulo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("mensaje")]),t("td",[s._v("string/Vue.VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("si  "),t("code",{pre:!0},[s._v("message")]),s._v(" es tratado como una cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de notificacion")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("clase personalizada de icono. Será anulado por "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizado para la notificacion")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4500")])]),t("tr",[t("td",[s._v("position")]),t("td",[s._v("posicion personalizada")]),t("td",[s._v("string")]),t("td",[s._v("top-right/top-left/bottom-right/bottom-left")]),t("td",[s._v("top-right")])]),t("tr",[t("td",[s._v("showClose")]),t("td",[s._v("si se muestra el boton de cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("funcion que se ejecuta cuando la notificación se cierra")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("funcion que se ejecuta cuando se hace click en la notificación")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("Notification")]),this._v(" y "),a("code",{pre:!0},[this._v("this.$notify")]),this._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),a("code",{pre:!0},[this._v("close")]),this._v(" para ello.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[this._v("close")]),a("td",[this._v("cierra la notificación")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),s._m(1),t("p",[s._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">Show message</el-button>\n  <el-button :plain="true" @click="openVn">VNode</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),t("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),t("p",[s._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),t("code",[s._v("$message")]),s._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Show message"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n      },\n      \n      openVn() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n            h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n            h("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n          ])\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),t("p",[s._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),t("code",[s._v("type")]),s._v(" puede definir diferentes tipos, el predeterminado es "),t("code",[s._v("info")]),s._v(". En tales casos el cuerpo principal se pasa como el valor de "),t("code",[s._v("message")]),s._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),t("code",[s._v("open4")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("message"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("error"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n      },\n      open2() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(");\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Un boton para cerrar que puede ser agregado.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open5">message</el-button>\n  <el-button :plain="true" @click="open6">success</el-button>\n  <el-button :plain="true" @click="open7">warning</el-button>\n  <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),t("p",[s._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),t("code",[s._v("showClose")]),s._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),t("code",[s._v("duration")]),s._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),t("code",[s._v("0")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("message"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("success"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("warning"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("error"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      open5() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: 'Centered text',\n          center: true\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("Centered text")])]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openCenter"')]),s._v(">")]),s._v("Centered text"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      openCenter() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Centered text'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("Use HTML String")])]],2),t("p",[s._v("Establece la propiedad "),t("code",[s._v("dangerouslyUseHTMLString")]),s._v(" en true y "),t("code",[s._v("message")]),s._v(" sera tratado como una cadena HTML.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openHTML"')]),s._v(">")]),s._v("Use HTML String"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      openHTML() {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'<strong>This is <i>HTML</i> string</strong>'")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"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),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso basico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"tipos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Utiliza el atributo "),a("code",{pre:!0},[this._v("center")]),this._v(" para centrar el texto.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"utiliza-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"warning"},[t("p",[s._v("Aunque la propiedad "),t("code",{pre:!0},[s._v("message")]),s._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),t("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". Entonces cuando "),t("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" esta activada, asegurece que el contendio de "),t("code",{pre:!0},[s._v("message")]),s._v(" sea de confianza, y "),t("strong",[s._v("nunca")]),s._v(" asignar "),t("code",{pre:!0},[s._v("message")]),s._v(" a contenido generado por el usuario.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos-globales"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Element ha agregado un método global llamado "),a("code",{pre:!0},[this._v("$message")]),this._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),a("code",{pre:!0},[this._v("Message")]),this._v(" como lo hicimos en esta pagina.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"importacion-local"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Import "),a("code",{pre:!0},[this._v("Message")]),this._v(":")])},function(){var s=this.$createElement,a=this._self._c||s;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Message } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("En este caso deberia llamar al metodo "),a("code",{pre:!0},[this._v("Message(options)")]),this._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),a("code",{pre:!0},[this._v("Message.success(options)")]),this._v(". Puede llamar al metodo "),a("code",{pre:!0},[this._v("Message.closeAll()")]),this._v(" para cerrar manualmente todas las instancias.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripcion")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores permitidos")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("message")]),t("td",[s._v("texto del mensaje")]),t("td",[s._v("string / VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo del mensaje")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("clase personalizada para el icono, sobreescribe "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("dangerouslyUseHTMLString")]),t("td",[s._v("utilizado para que "),t("code",{pre:!0},[s._v("message")]),s._v(" sea tratado como cadena HTML")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("nombre de clase personalizado para el componente Message")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("showClose")]),t("td",[s._v("utilizado para mostrar un boton para cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("utilizado para centrar el texto")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[a("code",{pre:!0},[this._v("Message")]),this._v(" y "),a("code",{pre:!0},[this._v("this.$message")]),this._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),a("code",{pre:!0},[this._v("close")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[this._v("close")]),a("td",[this._v("cierra el componente Message")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},,,,,,,,function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-button @click="show = !show">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n\n\n\n',script:"\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n",style:"\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show=!s.show}}},[s._v("Click Me")]),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-fade-in-linear"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),t("transition",{attrs:{name:"el-fade-in"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),t("p",[s._v("Tenemos dos efectos de fading: "),t("code",[s._v("el-fade-in-linear")]),s._v(" y "),t("code",[s._v("el-fade-in")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n    })\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-button @click="show2 = !show2">Click Me</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n\n\n\n',script:"\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n",style:"\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show2=!s.show2}}},[s._v("Click Me")]),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-zoom-in-center"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),t("transition",{attrs:{name:"el-zoom-in-top"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),t("transition",{attrs:{name:"el-zoom-in-bottom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),t("p",[s._v("También tenemos zoom: "),t("code",[s._v("el-zoom-in-center")]),s._v(", "),t("code",[s._v("el-zoom-in-top")]),s._v(" y "),t("code",[s._v("el-zoom-in-bottom")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n    })\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-button @click="show3 = !show3">Click Me</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n\n\n\n',script:"\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n",style:"\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-button",{on:{click:function(a){s.show3=!s.show3}}},[s._v("Click Me")]),t("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[t("el-collapse-transition",[t("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[t("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),t("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show3"')]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n    })\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n    "),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"transiciones-incorporadas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transiciones incorporadas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentación")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"colapsado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Colapsado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Para efectos de colapsado usar el componente "),a("code",{pre:!0},[this._v("el-collapse-transition")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-js"}},[t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// fade/zoom")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/base.css'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// colapsar")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},,,,,,,,,function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Un grupo de opciones para manejar múltiples elecciones.")]),s._m(1),t("p",[s._v("Checkbox puede ser usado para alternar entre dos estados.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  \x3c!-- `checked` debe ser true o false --\x3e\n  <el-checkbox v-model="checked">Opción</el-checkbox>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{model:{value:s.checked,callback:function(a){s.checked=a},expression:"checked"}},[s._v("Opción")])]],2),t("p",[s._v("Define "),t("code",[s._v("v-model")]),s._v("(enlaza la variable) en "),t("code",[s._v("el-checkbox")]),s._v(". El valor por defecto es un "),t("code",[s._v("Boolean")]),s._v(" para un "),t("code",[s._v("checkbox")]),s._v(", y se convierte en "),t("code",[s._v("true")]),s._v(" cuando este es seleccionado. El contenido dentro del tag "),t("code",[s._v("el-checkbox")]),s._v(" se convierte en la descripción al costado del botón del checkbox.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- `checked` debe ser true o false --\x3e")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("Opción"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Estado deshabilitado para el checkbox.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(a){s.checked1=a},expression:"checked1"}},[s._v("Opción")]),t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(a){s.checked2=a},expression:"checked2"}},[s._v("Opción")])]],2),t("p",[s._v("Setear el atributo "),t("code",[s._v("disabled")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Opción"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Opción"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Opción A"></el-checkbox>\n    <el-checkbox label="Opción B"></el-checkbox>\n    <el-checkbox label="Opción C"></el-checkbox>\n    <el-checkbox label="disabled" disabled></el-checkbox>\n    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checkList: ['Seleccionado y deshabilitado','Opción A']\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox-group",{model:{value:s.checkList,callback:function(a){s.checkList=a},expression:"checkList"}},[t("el-checkbox",{attrs:{label:"Opción A"}}),t("el-checkbox",{attrs:{label:"Opción B"}}),t("el-checkbox",{attrs:{label:"Opción C"}}),t("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2),t("p",[s._v("El elemento "),t("code",[s._v("checkbox-group")]),s._v(" puede manejar multiples checkboxes en un grupo usando "),t("code",[s._v("v-model")]),s._v(" el cuál está enlazado a un "),t("code",[s._v("Array")]),s._v(". Dentro del elemento "),t("code",[s._v("el-checkbox")]),s._v(", "),t("code",[s._v("label")]),s._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),t("code",[s._v("label")]),s._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),t("code",[s._v("label")]),s._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción A"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción B"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción C"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Seleccionado y deshabilitado"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkList")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Seleccionado y deshabilitado'")]),s._v(","),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Opción A'")]),s._v("]\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</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" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? 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}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(a){s.checkAll=a},expression:"checkAll"}},[s._v("Marcar todos")]),t("div",{staticStyle:{margin:"15px 0"}}),t("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(a){s.checkedCities=a},expression:"checkedCities"}},s._l(s.cities,function(a){return t("el-checkbox",{key:a,attrs:{label:a}},[s._v(s._s(a))])}),1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":indeterminate")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isIndeterminate"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkAll"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Marcar todos"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 15px 0;"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkedCities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkAll")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkedCities")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions,\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isIndeterminate")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(val) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkedCities = val ? cityOptions : [];\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkAll = checkedCount === "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" && checkedCount < "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkedCities1" :min="1" :max="2">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(a){s.checkedCities1=a},expression:"checkedCities1"}},s._l(s.cities,function(a){return t("el-checkbox",{key:a,attrs:{label:a}},[s._v(s._s(a))])}),1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" \n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkedCities1"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkedCities1")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Checkbox con estilo tipo Botón.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n\n',script:"\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Shanghai'],\n        checkboxGroup3: ['Shanghai'],\n        checkboxGroup4: ['Shanghai'],\n        cities: cityOptions\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(a){s.checkboxGroup1=a},expression:"checkboxGroup1"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}),1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"medium"},model:{value:s.checkboxGroup2,callback:function(a){s.checkboxGroup2=a},expression:"checkboxGroup2"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}),1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup3,callback:function(a){s.checkboxGroup3=a},expression:"checkboxGroup3"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a,disabled:"Beijing"===a}},[s._v(s._s(a))])}),1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(a){s.checkboxGroup4=a},expression:"checkboxGroup4"}},s._l(s.cities,function(a){return t("el-checkbox-button",{key:a,attrs:{label:a}},[s._v(s._s(a))])}),1)],1)]],2),t("p",[s._v("Sólo debe cambiar el elemento "),t("code",[s._v("el-checkbox")]),s._v(" por el elemento "),t("code",[s._v("el-checkbox-button")]),s._v(". También proveemos el atributo "),t("code",[s._v("size")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"city === 'Beijing'\"")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup1")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div>\n    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>\n    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup5" size="small">\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n      <el-checkbox label="Opción1" border></el-checkbox>\n      <el-checkbox label="Opción2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checked3: true,\n        checked4: false,\n        checked5: false,\n        checked6: true,\n        checkboxGroup5: [],\n        checkboxGroup6: []\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",[t("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:s.checked3,callback:function(a){s.checked3=a},expression:"checked3"}}),t("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:s.checked4,callback:function(a){s.checked4=a},expression:"checked4"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:s.checked5,callback:function(a){s.checked5=a},expression:"checked5"}}),t("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:s.checked6,callback:function(a){s.checked6=a},expression:"checked6"}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(a){s.checkboxGroup5=a},expression:"checkboxGroup5"}},[t("el-checkbox",{attrs:{label:"Opción1",border:""}}),t("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(a){s.checkboxGroup6=a},expression:"checkboxGroup6"}},[t("el-checkbox",{attrs:{label:"Opción1",border:""}}),t("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2),t("p",[s._v("El atributo "),t("code",[s._v("border")]),s._v(" agrega un borde a los Checkboxes.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked3"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked4"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup5"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup6"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Opción2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data () {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup5")]),s._v(": [],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup6")]),s._v(": []\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"estado-deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estado Deshabilitado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"grupo-de-checkboxes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de Checkboxes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"indeterminado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("La propiedad "),a("code",{pre:!0},[this._v("indeterminate")]),this._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Las propiedades "),a("code",{pre:!0},[this._v("min")]),this._v(" y "),a("code",{pre:!0},[this._v("max")]),this._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"estilo-tipo-boton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo tipo Botón")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("valor del Checkbox si es usado dentro de un tag "),t("code",{pre:!0},[s._v("checkbox-group")])]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("true-label")]),t("td",[s._v("valor del Checkbox si está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("false-label")]),t("td",[s._v("valor del Checkbox si no está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si el Checkbox está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("especifica si agrega un borde alrededor del Checkbox")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del Checkbox, sólo funciona si "),t("code",{pre:!0},[s._v("border")]),s._v(" es true")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo 'name' nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("checked")]),t("td",[s._v("especifica si el Checkbox está marcado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indeterminate")]),t("td",[s._v("similar a "),t("code",{pre:!0},[s._v("indeterminate")]),s._v(" en el checkbox nativo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),a("td",[this._v("el valor actualizado")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-group")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por Defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),t("td",[s._v("string")]),t("td",[s._v("medium / small / mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si los checkboxes anidados están deshabilitados")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("cantidad mínima de checkboxes que deben ser marcados")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("cantidad máxima de checkboxes que pueden ser marcados")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color de fuente cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("color de border y de fondo cuando el botón está activo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#409EFF")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos-de-checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox-group")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Nombre de Evento")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[this._v("change")]),a("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),a("td",[this._v("el valor actualizado")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos-de-checkbox-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-button")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("valor del checkbox cuando es usado dentro de un "),t("code",{pre:!0},[s._v("checkbox-group")])]),t("td",[s._v("string / number / boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("true-label")]),t("td",[s._v("valor del checkbox si este está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("false-label")]),t("td",[s._v("valor del checkbox si este no está marcado")]),t("td",[s._v("string / number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("especifica si el checkbox está deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("atributo 'name' del checbox nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("checked")]),t("td",[s._v("si el checkbox está marcado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Utilice Date Picker para introducir la fecha.")]),s._m(1),t("p",[s._v('Date Picker básico por "día".')]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value1" type="date" placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1)]],2),t("p",[s._v("La medida está determinada por el atributo "),t("code",[s._v("type")]),s._v(" . Puede habilitar las opciones rápidas creando un objeto "),t("code",[s._v("picker-options")]),s._v(" con la propiedad "),t("code",[s._v("shortcuts")]),s._v(". La fecha desactivada se ajusta mediante "),t("code",[s._v("disabledDate")]),s._v(", que es una función.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n          disabledDate(time) {\n            "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" time.getTime() > "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now();\n          },\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="container">\n  <div class="block">\n    <span class="demonstration">Week</span>\n    <el-date-picker v-model="value3" type="week" format="Week WW" placeholder="Pick a week">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Month</span>\n    <el-date-picker v-model="value4" type="month" placeholder="Pick a month">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Year</span>\n    <el-date-picker v-model="value5" type="year" placeholder="Pick a year">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker type="dates" v-model="value14" placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: '',\n        value4: '',\n        value5: '',\n        value14: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"container"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Week")]),t("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Month")]),t("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1)]),t("div",{staticClass:"container"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Year")]),t("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Dates")]),t("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:s.value14,callback:function(a){s.value14=a},expression:"value14"}})],1)])]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"container"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"week"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Week WW"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"month"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"container"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"year"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Dates"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dates"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value14"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick one or more dates"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value14")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Se soporta la selección de un rango de fechas.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value6" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With quick options</span>\n    <el-date-picker v-model="value7" type="daterange" align="right" unlink-panels range-separator="To" start-placeholder="Start date" end-placeholder="End date" :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value6: '',\n        value7: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With quick options")]),t("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("p",[s._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),t("code",[s._v("unlink-panels")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("unlink-panels")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">date</span>\n    <el-date-picker v-model="value8" type="date" placeholder="Pick a date" default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">daterange</span>\n    <el-date-picker v-model="value9" type="daterange" align="right" start-placeholder="Start Date" end-placeholder="End Date" default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value8: '',\n        value9: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("date")]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:s.value8,callback:function(a){s.value8=a},expression:"value8"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("daterange")]),t("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}})],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("date"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("daterange"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("p",[s._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),s._m(9),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Emits Date object</span>\n    <div class="demonstration">Value: {{ value10 }}</div>\n    <el-date-picker v-model="value10" type="date" placeholder="Pick a Date" format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Use value-format</span>\n    <div class="demonstration">Value: {{ value11 }}</div>\n    <el-date-picker v-model="value11" type="date" placeholder="Pick a Date" format="yyyy/MM/dd" value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value12 }}</div>\n    <el-date-picker v-model="value12" type="date" placeholder="Pick a Date" format="yyyy/MM/dd" value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value10: '',\n        value11: '',\n        value12: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Emits Date object")]),t("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value10))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Use value-format")]),t("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value11))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(a){s.value11=a},expression:"value11"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Timestamp")]),t("div",{staticClass:"demonstration"},[s._v("Value："+s._s(s.value12))]),t("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:s.value12,callback:function(a){s.value12=a},expression:"value12"}})],1)]],2),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Emits Date object"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value10 }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Use value-format"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value11 }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy-MM-dd"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Timestamp"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value：{{ value12 }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"timestamp"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),t("p",[s._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <p>Component value：{{ value12 }}</p>\n    <el-date-picker v-model="value12" type="daterange" start-placeholder="Start date" end-placeholder="End date" :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value12: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("p",[s._v("Component value："+s._s(s.value12))]),t("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:s.value12,callback:function(a){s.value12=a},expression:"value12"}})],1)]],2),t("p",[s._v("Por defecto, la hora de la fecha de inicio y final es "),t("code",[s._v("00:00:00")]),s._v(". Configurar "),t("code",[s._v("default-time")]),s._v("  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  "),t("code",[s._v("12:00:00")]),s._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Component value：{{ value12 }}"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['00:00:00', '23:59:59']\"")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),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)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"ingresar-fecha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ingresar Fecha")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"otras-mediciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Otras mediciones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"rango-de-fechas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de fechas")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"valor-por-defecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor por defecto")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),a("code",{pre:!0},[this._v("default-value")]),this._v(" para fijar otra fecha. Su valor debe ser definido por "),a("code",{pre:!0},[this._v("new Date()")]),this._v(".")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Si el tipo es "),a("code",{pre:!0},[this._v("daterange")]),this._v(", "),a("code",{pre:!0},[this._v("default-value")]),this._v(" establece el calendario del lado izquierdo.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"formatos-de-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formatos de Date")])},function(){var s=this.$createElement,a=this._self._c||s;return a("p",[this._v("Utilice "),a("code",{pre:!0},[this._v("format")]),this._v(" para controlar el formato del texto visualizado en el input. Utilice "),a("code",{pre:!0},[this._v("value-format")]),this._v(" para controlar el formato del valor vinculado.")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"warning"},[a("p",[this._v("Preste atención a la capitalización")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("formato")]),t("th",[s._v("significado")]),t("th",[s._v("nota")]),t("th",[s._v("ejemplo")])])]),t("tbody",[t("tr",[t("td",[t("code",{pre:!0},[s._v("yyyy")])]),t("td",[s._v("año")]),t("td"),t("td",[s._v("2017")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("M")])]),t("td",[s._v("mes")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("1")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("MM")])]),t("td",[s._v("mes")]),t("td"),t("td",[s._v("01")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("W")])]),t("td",[s._v("semana")]),t("td",[s._v("solamente para semanas en picker's "),t("code",{pre:!0},[s._v("format")]),s._v("; no acepta 0")]),t("td",[s._v("1")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("WW")])]),t("td",[s._v("semana")]),t("td",[s._v("solamente para semanas en  picker's "),t("code",{pre:!0},[s._v("format")])]),t("td",[s._v("01")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("d")])]),t("td",[s._v("dia")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("2")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("dd")])]),t("td",[s._v("dia")]),t("td"),t("td",[s._v("02")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("H")])]),t("td",[s._v("hora")]),t("td",[s._v("24-hora reloj; no acepta 0")]),t("td",[s._v("3")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("HH")])]),t("td",[s._v("hora")]),t("td",[s._v("24-hora reloj")]),t("td",[s._v("03")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("h")])]),t("td",[s._v("hora")]),t("td",[s._v("12-hora reloj;  debe usarse con "),t("code",{pre:!0},[s._v("A")]),s._v(" o "),t("code",{pre:!0},[s._v("a")]),s._v("; no acepta 0")]),t("td",[s._v("3")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("hh")])]),t("td",[s._v("hour")]),t("td",[s._v("12-hora reloj;  debe usarse con "),t("code",{pre:!0},[s._v("A")]),s._v(" o "),t("code",{pre:!0},[s._v("a")])]),t("td",[s._v("03")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("m")])]),t("td",[s._v("minuto")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("4")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("mm")])]),t("td",[s._v("minuto")]),t("td"),t("td",[s._v("04")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("s")])]),t("td",[s._v("segundo")]),t("td",[s._v("no acepta 0")]),t("td",[s._v("5")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("segundo")]),t("td"),t("td",[s._v("05")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("A")])]),t("td",[s._v("AM/PM")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("format")]),s._v(", mayusculas")]),t("td",[s._v("AM")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("a")])]),t("td",[s._v("am/pm")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("format")]),s._v(", minúsculas")]),t("td",[s._v("am")])]),t("tr",[t("td",[t("code",{pre:!0},[s._v("timestamp")])]),t("td",[s._v("JS timestamp")]),t("td",[s._v("solamente para "),t("code",{pre:!0},[s._v("value-format")]),s._v("; valor vinculado debe ser un "),t("code",{pre:!0},[s._v("number")])]),t("td",[s._v("1483326245000")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("date(DatePicker) / array(DateRangePicker)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si DatePicker es solo de lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si DatePicker esta deshabilitado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("si el input es editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("si se muestra el boton de borrado")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder cuando el modo NO es rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para la fecha de inicio en modo rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para la fecha final en modo rango")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo de picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/dates/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato en que se muestra el valor en el input")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizada para el dropdown de DatePicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, chequee la tabla debajo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rangos")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, valor por defecto para el calendario")]),t("td",[s._v("Date")]),t("td",[s._v("cualquiera aceptado por "),t("code",{pre:!0},[s._v("new Date()")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-time")]),t("td",[s._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),t("td",[s._v("string[]")]),t("td",[s._v("Array de dos valores, cada uno es un string del estilo "),t("code",{pre:!0},[s._v("12:00:00")]),s._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en el input nativo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unlink-panels")]),t("td",[s._v("desvincular los dos paneles de fecha en el range-picker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-date")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"opciones-del-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones del Picker")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),t("td",[s._v("object[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("firstDayOfWeek")]),t("td",[s._v("primer dia de la semana")]),t("td",[s._v("Number")]),t("td",[s._v("1 to 7")]),t("td",[s._v("7")])]),t("tr",[t("td",[s._v("onPick")]),t("td",[s._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),t("code",{pre:!0},[s._v("daterange")]),s._v(" y "),t("code",{pre:!0},[s._v("datetimerange")]),s._v(".")]),t("td",[s._v("Function({ maxDate, minDate })")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"accesso-directo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesso directo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("título del acceso directo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("una función se dispara al hacer clic en el acceso directo, con"),t("code",{pre:!0},[s._v("vm")]),s._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),t("code",{pre:!0},[s._v("pick")]),s._v(". Ejemplo: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("se dispara cuando el usuario confirma el valor")]),t("td",[s._v("valor enlazado al componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("se dispara cuando el input pierde el foco")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("se dispara cuando el input obtiene el foco")]),t("td",[s._v("instancia del componente")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Metodo")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[this._v("focus")]),a("td",[this._v("coloca el foco en el input")]),a("td",[this._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Name")]),a("th",[this._v("Description")])])]),a("tbody",[a("tr",[a("td",[this._v("range-separator")]),a("td",[this._v("costume range separator content")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Seleccionar fecha y tiempo juntos en un picker.")]),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With default time</span>\n    <el-date-picker v-model="value3" type="datetime" placeholder="Select date and time" default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),t("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With default time")]),t("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1)]],2),t("p",[s._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With default time"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-time")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12:00:00"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value4" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions2" range-separator="To" start-placeholder="Start date" end-placeholder="End date" align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),t("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1)]],2),t("p",[s._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),t("code",[s._v("type")]),s._v(" a "),t("code",[s._v("datetimerange")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n              picker.$emit("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("), "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("11")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(")],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00</span>\n    <el-date-picker v-model="value6" type="datetimerange" start-placeholder="Start Date" end-placeholder="End Date" :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker v-model="value7" type="datetimerange" align="right" start-placeholder="Start Date" end-placeholder="End Date" :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value6: '',\n        value7: ''\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00")]),t("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Start date time 12:00:00, end date time 08:00:00")]),t("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("p",[s._v("When picking date range on the date panel with type "),t("code",[s._v("datetimerange")]),s._v(", "),t("code",[s._v("00:00:00")]),s._v(" will be used as the default time value for start and end date. We can control it with the "),t("code",[s._v("default-time")]),s._v(" attribute. "),t("code",[s._v("default-time")]),s._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['12:00:00']\"")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Start date time 12:00:00, end date time 08:00:00"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['12:00:00', '08:00:00']\"")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),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)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),a("code",{pre:!0},[this._v("pickerOptions")]),this._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"fecha-y-hora"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fecha y hora")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alcance de fecha y tiempo")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributos")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("value / v-model")]),t("td",[s._v("valor enlazado")]),t("td",[s._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("si DatePicker es solo de lectura")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("si DatePicker esta deshabilitada")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("Si la entrada es editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("Si mostrar el botón de "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("tamaño del input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder cuando el modo NO es Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("start-placeholder")]),t("td",[s._v("placeholder para el inicio de fecha en el modo Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("end-placeholder")]),t("td",[s._v("placeholder para el fin de fecha en el modo Range")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("time-arrow-control")]),t("td",[s._v("si se puede modificar el "),t("code",{pre:!0},[s._v("time")]),s._v("  utilizando botones con flechas")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("tipo del picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("formato de valor mostrado en el input")]),t("td",[s._v("string")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alineación")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("nombre de clase personalizado para el Dropdown de DatePicker")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("opciones adicionales, Comprueba la tabla de mas abajo")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("separador de rango")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("'-'")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("opcional, fecha predeterminada del calendario")]),t("td",[s._v("Fecha")]),t("td",[s._v("cualquier cosa aceptada por "),t("code",{pre:!0},[s._v("new Date()")]),s._v(" —")]),t("td")]),t("tr",[t("td",[s._v("default-time")]),t("td",[s._v("el valor de tiempo por defecto después de elegir una fecha")]),t("td",[s._v("non-range: string / range: string[]")]),t("td",[s._v("non-range: Una cadena de texto como "),t("code",{pre:!0},[s._v("12:00:00")]),s._v(", range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value-format")]),t("td",[s._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),t("td",[s._v("cadena")]),t("td",[s._v("ver "),t("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[s._v("date formats")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("igual que "),t("code",{pre:!0},[s._v("name")]),s._v(" en la entrada nativa")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unlink-panels")]),t("td",[s._v("desconectar dos date-panels en range-picker")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("prefix-icon")]),t("td",[s._v("Clase personalizada para el icono prefijado")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-date")])]),t("tr",[t("td",[s._v("clear-icon")]),t("td",[s._v("Clase personalizada para el icono "),t("code",{pre:!0},[s._v("clear")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-circle-close")])]),t("tr",[t("td",[s._v("validate-event")]),t("td",[s._v("whether to trigger form validation")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),t("td",[s._v("objeto[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),t("td",[s._v("función")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("firstDayOfWeek")]),t("td",[s._v("primera día de semana")]),t("td",[s._v("Número")]),t("td",[s._v("1 to 7")]),t("td",[s._v("7")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"accesos-directos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesos directos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("título del acceso directo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),t("code",{pre:!0},[s._v("vm")]),s._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),t("code",{pre:!0},[s._v("pick")]),s._v(". Ejemplo: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de evento")]),t("th",[s._v("Descripción")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("Se dispara cuando el usuario confirma el valor")]),t("td",[s._v("valor enlazado del componente")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("Se dispara cuando el input pierde el foco")]),t("td",[s._v("instancia del componente")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("Se dispara cuando el input obtiene el foco")]),t("td",[s._v("instancia del componente")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var s=this.$createElement,a=this._self._c||s;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[this._v("Método")]),a("th",[this._v("Descripción")]),a("th",[this._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[this._v("focus")]),a("td",[this._v("foco en el input")]),a("td",[this._v("—")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})},function(s,a,t){"use strict";var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("Informar a usuarios preservando el estado de la página actual.")]),s._m(1),t("p",[s._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog title="Tips" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">\n  <span>This is a message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure to close this dialog?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),t("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(a){s.dialogVisible=a}}},[t("span",[s._v("This is a message")]),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.dialogVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),t("p",[s._v("Establezca el atributo "),t("code",[s._v("visible")]),s._v(" con un booleano, y el Dialog se muestra cuando es "),t("code",[s._v("true")]),s._v(". El diálogo tiene dos partes: "),t("code",[s._v("body")]),s._v(" y "),t("code",[s._v("footer")]),s._v(",  este último requiere un slot llamado "),t("code",[s._v("footer")]),s._v(". El atributo "),t("code",[s._v("title")]),s._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),t("code",[s._v("before-close")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Tips"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":before-close")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("This is a message"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      };\n    },\n    "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      handleClose(done) {\n        "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n          .then("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n            done();\n          })\n          .catch("),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {});\n      }\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("p",[s._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Name" width="200"></el-table-column>\n    <el-table-column property="address" label="Address"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Promotion name" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Please select a zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\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          date: '2016-05-03',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        formLabelWidth: '120px'\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),t("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(a){s.dialogTableVisible=a}}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t("el-button",{attrs:{type:"text"},on:{click:function(a){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),t("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(a){s.dialogFormVisible=a}}},[t("el-form",{attrs:{model:s.form}},[t("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[t("el-input",{attrs:{autocomplete:"off"},model:{value:s.form.name,callback:function(a){s.$set(s.form,"name",a)},expression:"form.name"}})],1),t("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[t("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(a){s.$set(s.form,"region",a)},expression:"form.region"}},[t("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.dialogFormVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Table --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Form --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Promotion name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zones"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone No.1"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Zone No.2"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogTableVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogFormVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n          "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n        },\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formLabelWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n  \n  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n    <el-dialog width="30%" title="Inner Dialog" :visible.sync="innerVisible" append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Cancel</el-button>\n      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.outerVisible=!0}}},[s._v("open the outer Dialog")]),t("el-dialog",{attrs:{title:"Outer Dialog",visible:s.outerVisible},on:{"update:visible":function(a){s.outerVisible=a}}},[t("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(a){s.innerVisible=a}}}),t("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.outerVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.innerVisible=!0}}},[s._v("open the inner Dialog")])],1)],1)]],2),t("p",[s._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),t("code",[s._v("append-to-body")]),s._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("open the outer Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  \n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Outer Dialog"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Inner Dialog"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"innerVisible"')]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("append-to-body")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("open the inner Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("outerVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("innerVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      };\n    }\n  }\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("El contenido de Diálogo se puede centrar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog title="Warning" :visible.sync="centerDialogVisible" width="30%" center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Cancel</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(a){s.centerDialogVisible=!0}}},[s._v("Click to open the Dialog")]),t("el-dialog",{attrs:{title:"Warning",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(a){s.centerDialogVisible=a}}},[t("span",[s._v("It should be noted that the content will not be aligned in center by default")]),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("el-button",{on:{click:function(a){s.centerDialogVisible=!1}}},[s._v("Cancel")]),t("el-button",{attrs:{type:"primary"},on:{click:function(a){s.centerDialogVisible=!1}}},[s._v("Confirm")])],1)])],1),t("p",[s._v("Ajuste "),t("code",[s._v("center")]),s._v(" en "),t("code",[s._v("true")]),s._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. "),t("code",[s._v("center")]),s._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("Click to open the Dialog"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Warning"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("It should be noted that the content will not be aligned in center by default"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Cancel"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Confirm"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n        "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("centerDialogVisible")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      };\n    }\n  };\n")]),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},r=[function(){var s=this.$createElement,a=this._self._c||s;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Básico")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[this._v("before-close")]),this._v("  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),a("code",{pre:!0},[this._v("footer")]),this._v(", puede agregar lo que haría "),a("code",{pre:!0},[this._v("before-close")]),this._v(" en el manejador de eventos de los botones.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"personalizaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"dialogo-anidado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diálogo anidado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"contenido-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido centrado")])},function(){var s=this.$createElement,a=this._self._c||s;return a("div",{staticClass:"tip"},[a("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),a("code",{pre:!0},[this._v("ref")]),this._v(", do it in the "),a("code",{pre:!0},[this._v("open")]),this._v(" event callback.")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("Si la variable ligada a "),t("code",{pre:!0},[s._v("visible")]),s._v(" se gestiona en el Vuex store, el "),t("code",{pre:!0},[s._v(".sync")]),s._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),t("code",{pre:!0},[s._v(".sync")]),s._v(", escuche los eventos de "),t("code",{pre:!0},[s._v("open")]),s._v(" y "),t("code",{pre:!0},[s._v("close")]),s._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"atributo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributo")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Atributo")]),t("th",[s._v("Descripción")]),t("th",[s._v("Tipo")]),t("th",[s._v("Valores aceptados")]),t("th",[s._v("Por defecto")])])]),t("tbody",[t("tr",[t("td",[s._v("visible")]),t("td",[s._v("visibilidad del Diálogo, apoya el modificador .sync")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("anchura de Diálogo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("50%")])]),t("tr",[t("td",[s._v("fullscreen")]),t("td",[s._v("si el diálogo ocupa pantalla completa")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("top")]),t("td",[s._v("valor de "),t("code",{pre:!0},[s._v("margin-top")]),s._v(" del Diálogo CSS")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("15vh")])]),t("tr",[t("td",[s._v("modal")]),t("td",[s._v("si se muestra una máscara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("modal-append-to-body")]),t("td",[s._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("append-to-body")]),t("td",[s._v("Si adjuntar el cuadro de diálogo al cuerpo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("lock-scroll")]),t("td",[s._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("custom-class")]),t("td",[s._v("nombres de clase personalizada para el Diálogo")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close-on-click-modal")]),t("td",[s._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-on-press-escape")]),t("td",[s._v("si el Diálogo puede ser cerrado presionando ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-close")]),t("td",[s._v("si mostrar un botón de cerrar")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("before-close")]),t("td",[s._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),t("td",[s._v("función(done) "),t("code",{pre:!0},[s._v("done")]),s._v("se usa para cerrar el diálog")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("si alinear el encabezado y el pie de página en el centro")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre")]),t("th",[s._v("Descripcíon")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("contenido de Diálogo")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("contenido del título de Diálogo")])]),t("tr",[t("td",[s._v("footer")]),t("td",[s._v("contenido del pie de página de Diálogo")])])])])},function(){var s=this.$createElement,a=this._self._c||s;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Nombre de Evento")]),t("th",[s._v("Descripcíon")]),t("th",[s._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[s._v("open")]),t("td",[s._v("se activa cuando se abre el cuadro de Diálogo")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("opened")]),t("td",[s._v("se activa cuando la animacion de apertura del Dialog termina.")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("se dispara cuando el Diálogo se cierra")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closed")]),t("td",[s._v("se activa cuando finaliza la animación de cierre del Diálog")]),t("td",[s._v("—")])])])])}];t.d(a,"a",function(){return e}),t.d(a,"b",function(){return r})}])]);