element/zh-CN.03610c8.js

webpackJsonp([1,4],Array(29).concat([function(s,a,t){function l(s){return t(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./changelog.vue":30,"./component.vue":38,"./design.vue":44,"./guide.vue":52,"./index.vue":57,"./nav.vue":69,"./resource.vue":78};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=29},function(s,a,t){function l(s){t(31)}var n=t(13)(t(33),t(37),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(32);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("306347c8",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,'.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}',""])},function(s,a,t){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}a.__esModule=!0;var n=t(34),e=l(n);a.default={components:{ChangeLog:e.default},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 l=a[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=a.length,i=2;i<e;i++){var v=a[i];t=a[i].querySelector("a"),t&&"header-anchor"===t.getAttribute("class")&&t.remove(),"H3"!==v.tagName?n+=a[i].outerHTML:(l=a[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,a,t){s.exports=t(35)},function(s,a,t){var l=t(13)(null,t(36),null,null,null);s.exports=l.exports},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"geng-xin-ri-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),t("h3",{attrs:{id:"1-4-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-4-6"
attrs:{id:"1-1-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),t("p",[t("em",[s._v("2016-12-30")])]),t("ul",[t("li",[s._v("修复 Vue 2.1.7 升级导致的 Table "),t("code",[s._v("sortable")]),s._v(" 和 "),t("code",[s._v("fixed")]),s._v(" 无法使用的问题")]),t("li",[s._v("修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098")]),t("li",[s._v("移除 Collapse 的 "),t("code",[s._v("title")]),s._v(" scoped slot, 并新增 "),t("code",[s._v("title")]),s._v(" named slot，#2100")]),t("li",[s._v("修复 TimePicker 范围选择无法使用的问题")]),t("li",[s._v("修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106")]),t("li",[s._v("修复 Select 在使用方向键导航时控制台报错的问题，#2120")]),t("li",[s._v("修复 Form 中可搜索的 Select 验证时机错误的问题，#2120")])]),t("h3",{attrs:{id:"1-1-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),t("p",[t("em",[s._v("2016-12-29")])]),t("ul",[t("li",[s._v("修复由于编译而出现的不兼容新版 Vue 的问题")])]),t("h3",{attrs:{id:"1-1-0-helium"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),t("p",[t("em",[s._v("2016-12-29")])]),t("h4",{attrs:{id:"xin-te-xing-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),t("ul",[t("li",[s._v("新增 Carousel、Collapse 组件")]),t("li",[s._v("支持 SSR")]),t("li",[s._v("组件内的滚动条样式优化")]),t("li",[s._v("Table 支持通过 "),t("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped Slots")]),s._v(" 传入模板；原来的 "),t("code",[s._v("inline-template")]),s._v(" 仍然兼容，但是不再推荐使用，未来可能会被移除")]),t("li",[s._v("Table 支持展开行功能(Expandable rows)")]),t("li",[s._v("DatePicker 支持指定周起始日(first day of week)")]),t("li",[s._v("TimeSelect 支持设置 "),t("code",[s._v("maxTime")])]),t("li",[s._v("Autocomplete 新增 "),t("code",[s._v("popper-class")]),s._v("属性")]),t("li",[s._v("Tab-Pane 新增 name 为 label 的具名 "),t("code",[s._v("slot")]),s._v("，用于实现自定义标签内容")])]),t("h4",{attrs:{id:"xiu-fu-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),t("ul",[t("li",[s._v("DatePicker 的 "),t("code",[s._v("change")]),s._v(" 事件错误地触发多次的问题，#2070")]),t("li",[s._v("Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883")])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新：")]),t("ul",[t("li",[s._v("最低兼容 Vue 2.1.6")]),t("li",[s._v("Form validateField() 方法回调的参数更新")]),t("li",[s._v("Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入")]),t("li",[s._v("Input 和 Select 盒模型从 "),t("code",[s._v("block")]),s._v(" 修改为 "),t("code",[s._v("inline-block")])]),t("li",[s._v("Tabs 盒模型从 "),t("code",[s._v("inline-block")]),s._v(" 修改为 "),t("code",[s._v("block")]),s._v("，Tab-Pane 移除 "),t("code",[s._v("label-content")]),s._v(" 属性")]),t("li",[s._v("Autocomplete 下拉列表现在直接插入到 "),t("code",[s._v("<body>")]),s._v(" 标签下，而不是 "),t("code",[s._v("<el-autocomplete>")]),s._v(" 下")])]),t("h3",{attrs:{id:"1-0-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),t("p",[t("em",[s._v("2016-12-27")])]),t("ul",[t("li",[s._v("修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834")]),t("li",[s._v("修复 Tree 在 Firefox 下
},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MT
s(i)}h.default.isFunction(t)&&s({name:"callback",args:[t]}),h.default.isNumber(t)&&s(t>0?{name:"wait",args:[t]}:{name:"erase",args:[t]}),h.default.isObject(t)&&(h.default.isArray(t.args)||(t.args=[]),t.args.unshift(function(){y(t.name+":end",t),p()}),a.push(t))}for(var a=[],t=arguments.length,l=Array(t),n=0;n<t;n++)l[n]=arguments[n];return s([{name:"publisher",args:["sequence:start"]}].concat(l).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(N.scenario,a),N.options.autoplay&&i(),this}function i(){return"stopping"===N.status&&(N.status="playing"),"ready"===N.status&&(N.status="playing",p()),this}function v(s){return("ready"===N.status||h.default.isFunction(s))&&(N.currentScene=-1,"ready"===N.status?i():s()),this}function c(){return N.status="stopping",this}function p(){if("stopping"===N.status)return N.status="ready",this;if("playing"!==N.status)return this;if(N.currentScene+1>=N.scenario.length)return N.status="ready",y("scenario:end"),this;var s=N.scenario[++N.currentScene];if(0===N.currentScene&&y("scenario:start"),"publisher"===s.name){var t=e(s.args),l=t[0],i=t.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&a(s.actor),y(s.name+":start",s),s.name){case"type":o.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":m.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function o(s,a){var l=t(),n=N.options.locale,e=N.options.minSpeed.type,i=N.options.maxSpeed.type,v=l.displayValue,_=-1,c=!1,r=null,p=null,h=j.default.map(a);return a=j.default.strip(a),function t(){var o=j.default.strip(l.displayValue.substr(v.length));if(o===a)return s();var C=a.substr(0,_+1),g=o!==C,u=l.shouldBeMistaken(o,a,r,p),m=c||!u;if(g&&m)c=!0,r=null,l.displayValue=v+j.default.inject(o.substr(0,o.length-1),h),_--,p=_;else{c=!1;var b=a.charAt(++_);u&&(b=d.default.randomCharNear(b,n),null==r&&(r=_)),l.displayValue=v+j.default.inject(o+b,h)}return setTimeout(t,l.getTypingSpeed(e,i))}(),this}function C(s,a){var l=t();if(null==l)return s();if(x.erase!==!0)return l.displayValue="",s();var n=N.options.minSpeed.erase,e=N.options.maxSpeed.erase,i=l.displayValue,v=j.default.map(i);i=j.default.strip(i);var _=i.length,c=void 0,r=0;return h.default.isNumber(a)&&(a>0?c=a:r=i.length+a),function a(){return _===r?s():(l.displayValue=j.default.inject(i.substr(0,--_),v),setTimeout(a,c||l.getTypingSpeed(n,e)))}(),this}function m(s,a){return a.call(this,s),this}function b(s,a){return setTimeout(s.bind(this),a),this}function f(s,a){return s.split(",").forEach(function(s){s=s.trim(),h.default.isArray(N.events[s])||(N.events[s]=[]),N.events[s].push(a)}),this}function y(){for(var s=arguments.length,a=Array(s),t=0;t<s;t++)a[t]=arguments[t];var l=a[0],n=N.events[l]||[];return n.length>0&&n.concat(N.events["*"]||[]).forEach(function(s){return s.apply(void 0,a)}),this}var x=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(x=r.default.merge({},u,x),h.default.isNumber(x.minSpeed)){var k=x,w=k.minSpeed;x.minSpeed={erase:w,type:w}}if(h.default.isNumber(x.maxSpeed)){var A=x,I=A.maxSpeed;x.maxSpeed={erase:I,type:I}}if("detect"===x.locale&&g){var M=g.languages;h.default.isArray(M)&&h.default.isString(M[0])&&(x.locale=M[0].substr(0,2))}d.default.supports(x.locale)||(x.locale=d.default.defaultLocale);var N={options:x,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return a(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:t,addScene:l,play:i,replay:v,stop:c,on:f},{options:{get:function(){return N.options},configurable:!0,enumerable:!0},status:{get:function(){return N.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(a,"__esModule",{value:!0});var v=t(1),_=l(v),c=t(3),r=l(c),p=t(2),h=l(p),o=t(4),d=l(o),C=t(6),j=l(C),g="undefined"!=typeof window&&window.navigator,u={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],a=i
},function(s,a){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNj
attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("title")])]),t("td",[s._v("标题，"),t("strong",[s._v("必选参数")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("主题")]),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("辅助性文字。也可通过默认 slot 传入")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("是否可关闭")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-text")]),t("td",[s._v("关闭按钮自定义文本")]),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("是否显示图标")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" 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("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("关闭alert时触发的事件")]),t("td",[s._v("—")])])])])}]}},function(s,a,t){s.exports=t(130)},function(s,a,t){function l(s){t(131),t(133)}var n=t(13)(null,t(135),l,"data-v-4377c3aa",null);s.exports=n.exports},function(s,a,t){var l=t(132);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("50d1d9b3",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-badge.demo-box .el-dropdown{vertical-align:middle}",""])},function(s,a,t){var l=t(134);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("5af8fd0a",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,'.share-button[data-v-4377c3aa]{width:36px;padding:10px}.mark[data-v-4377c3aa]{margin-top:8px;line-height:1;float:right}.clearfix[data-v-4377c3aa]:after,.clearfix[data-v-4377c3aa]:before{display:table;content:""}.clearfix[data-v-4377c3aa]:after{clear:both}.item[data-v-4377c3aa]{margin-right:40px}',""])},function(s,a){s.exports={
staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("不同的颜色倾向代表不同的提示")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认显示颜色</span>\n  <span class="wrapper">\n    <el-button type="success">成功按钮</el-button>\n    <el-button type="warning">警告按钮</el-button>\n    <el-button type="danger">危险按钮</el-button>\n    <el-button type="info">信息按钮</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">hover 显示颜色</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">成功按钮</el-button>\n    <el-button :plain="true" type="warning">警告按钮</el-button>\n    <el-button :plain="true" type="danger">危险按钮</el-button>\n    <el-button :plain="true" type="info">信息按钮</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),t("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),t("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),t("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("hover 显示颜色")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{plain:!0,type:"success"}},[s._v("成功按钮")]),t("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("警告按钮")]),t("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("危险按钮")]),t("el-button",{attrs:{plain:!0,type:"info"}},[s._v("信息按钮")])],1)])]),t("p",[s._v("朴素按钮同样设置了不同的"),t("code",[s._v("type")]),s._v("属性对应的样式（可选值同上），默认为"),t("code",[s._v("info")]),s._v("。设置"),t("code",[s._v("plain")]),s._v("属性，它接受一个"),t("code",[s._v("Boolean")]),s._v("。注意，在该情况下，"),t("code",[s._v("type")]),s._v("虽然可以为"),t("code",[s._v("text")]),s._v("，但是是没有意义的，会显示为"),t("code",[s._v("text button")]),s._v("的样式。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[
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"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(a){return l("div",{key:a,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+a)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),l("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>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-row",s._l(2,function(a,n){return l("el-col",{key:a,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:t(153)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{stat
}}},[t("div",{staticClass:"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))])])}))]],2),t("p",[s._v("将"),t("code",[s._v("type")]),s._v("属性设置为"),t("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),t("span",[s._v("{{")]),s._v(" item "),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),t("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(
staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("la
staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),t("span",{staticClass:"hljs-att
},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n           
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),t("p",[s._v("若需要允许用户选择任意一级选项，则可将"),t("code",[s._v("change-on-select")]),s._v("赋值为"),t("code",[s._v("true")])]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticCla
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),t("p",[s._v("将"),t("code",[s._v("filterable")]),s._v("赋值为"),t("code",[s._v("true")]),s._v("即可打开搜索功能。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),t("
staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` 为 true 或 false -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("多选框不可用状态。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</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",slot:"source"},[[t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(a){s.checked1=a},expression:"checked1"}},[s._v("备选项1")]),t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(a){s.checked2=a},expression:"checked2"}},[s._v("备选项")])]],2),t("p",[s._v("设置"),t("code",[s._v("disabled")]),s._v("属性即可。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),t("
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("Checkbox 按钮组尺寸")]),t("td",[s._v("string")]),t("td",[s._v("large, small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("按钮激活时的填充色和边框色")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#20a0ff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("按钮激活时的文本颜色")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("可被勾选的 checkbox 的最小数量")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("可被勾选的 checkbox 的最大数量")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox 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("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("当绑定值变化时触发的事件")]),t("td",[s._v("event 事件对象")])])])])}]}},function(s,a,t){s.exports=t(173)},function(s,a,t){function l(s){t(174)}var n=t(13)(t(176),t(177),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(175);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("195c5e2b",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("通过折叠面板收纳内容区域")]),s._m(1),t("p",[s._v("可同时展开多个面板，面板之间不影响")]),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>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的<EFBFBD><EFBFBD>
staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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",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 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),t("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidd
},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"yyyy 第 WW 周"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择周"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择月"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择年"')]),s._v(">")]),s._v("\n  "),t("span",{staticClas
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("默认")]),t("el-date-picker",{attrs:{type:"datetimerange",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),t("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1)]],2),t("p",[s._v("设置"),t("code",[s._v("type")]),s._v("为"),t("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{static
},[s._v(":label-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s.
staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),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    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",[s._v("黄金糕")]),t("el-dropdown-item",[s._v("狮子头")]),t("el-dropdown-item",[s._v("螺蛳粉")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),t("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),t("code",[s._v("hide-on-click")]),s._v("属性默认为"),t("code",[s._v("false")]),s._v("可以关闭此功能。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v
staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass
},[s._v('"ruleForm"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},
staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'年龄不能为空'")]),s._v("));\n        }\n        setTimeout("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),t("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'请输入数字值'")]),s._v("));\n          } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),t("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'必须年满18岁'")]),s._v("));\n            } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),t("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'请输入密码'")]),s._v("));\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),t("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'请再次输入密码'")]),s._v("));\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),t("spa
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item 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("说明")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("Form Item 的内容")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("标签文本的内容")])])])])}]}},function(s,a,t){s.exports=t(223)},function(s,a,t){var l=t(13)(t(224),t(226),null,null,null);s.exports=l.exports},function(s,a,t){"use strict";var l=t(225);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,a){"use strict";a.__esModule=!0;var t=a.hasClass=function(s,a){return s.className.match(new RegExp("(\\s|^)"+a+"(\\s|$)"))},l=a.addClass=function(s,a){t(s,a)||(s.className+=" "+a)},n=a.removeClass=function(s,a){if(t(s,a)){var l=new RegExp("(\\s|^)"+a+"(\\s|$)");s.className=s.className.replace(l," ")}};a.toggleClass=function(s,a){t(s,a)?n(s,a):l(s,a)}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h1",[s._v("组件说明文档")])])}]}},function(s,a,t){s.exports=t(228)},function(s,a,t){function l(s){t(229)}var n=t(13)(null,t(231),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(230);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("62cc979c",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,"ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}",""])},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"guo-ji-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),t("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-comment"},[s._v("// 完整引入 Element")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),t("p",[s._v("或")]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-comment"},[s._v("// 按需引入 Element")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{
staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("允许定义递增递减的步数控制")]),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",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("设置"),t("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),t("code",[s._v("Number")]),s._v("。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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-input-number size="large" v-model="num4"></el-input-number>\n  <el-input-number v-model="num5"></el-input-number>\n  <el-input-number size="small" v-model="num6"></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      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callb
staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),t("span",{staticClass:"hljs-keyw
staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-s
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(a){s.state4=a},expression:"state4"}})],1),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hlj
staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"actionscript"},[s._v("\n    "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),t("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},[s._v("function")]),t("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),t("
staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("
staticClass:"undefined"},[s._v("\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3"><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",slot:"source"},[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticCla
}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"jia-zai-wen-an"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载文案")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("其中 "),t("code",[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),t("code",[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),t("code",[s._v("close")]),s._v(" 方法来关闭它：")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),t("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),t("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),t("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("此时调用它们中任意一个的 "),t("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),t("code",[s._v("$loading")]),s._v("，它的调用方式为："),t("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("target")]),t("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),t("code",[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),t("td
},[s._v('"2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("导航一"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:
var t=a.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+t})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this,a=this.$createElement;this.$msgbox({title:"消息",message:a("p",null,[a("span",null,"内容可以是 "),a("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,a,t){"confirm"===s?(a.confirmButtonLoading=!0,a.confirmButtonText="执行中...",setTimeout(function(){t(),setTimeout(function(){a.confirmButtonLoading=!1},300)},3e3)):t()}}).then(function(a){setTimeout(function(){s.$message({type:"info",message:"action: "+a})},200)})}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。")]),s._m(1),t("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\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",slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),t("p",[s._v("调用"),t("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),t("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),t("code",[s._v("message")]),s._v("和"),t("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),t("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),t("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),t("span",{staticClass:"hljs-string"},[s._v("'这是一段内容'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(", {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'<EFBFBD><EFBFBD>
},[s._v("'内容可以是 '")]),s._v("),\n            h("),t("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),t("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n          ])\n        });\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),t("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),t("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),t("code",[s._v("info")]),s._v("。此时正文内容以"),t("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),t("code",[s._v("type")]),s._v("字段的情况下像"),t("code",[s._v("open4")]),s._v("那样直接调用。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("成功"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("警告"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("消息"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n 
return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Element 为 "),t("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),t("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("此时调用方法为 "),t("code",[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("标题")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("说明文字")]),t("td",[s._v("string/Vue.VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("主题样式，如果不在可选值内将被忽略")]),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("自定义图标的类名。若设置了 "),t("code",[s._v("type")]),s._v("，则 "),t("code",[s._v("iconClass")]),s._v(" 会被覆盖")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("自定义类名")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4500")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("关闭时的回调函数")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("点击 Notification 时的回调函数")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._
arg:"popover2"}]},[s._v("click 激活")]),t("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[t("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),t("p",[s._v("设置索引"),t("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),t("code",[s._v("v-popover")]),s._v("，指向索引ID。"),t("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),t("code",[s._v("hover")]),s._v(", "),t("code",[s._v("click")]),s._v(" 和 "),t("code",[s._v("focus")]),s._v("。第二种用法通过 "),t("code",[s._v("slot")]),s._v(" 指定 reference。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("click 激活"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{stat
staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("percentage")])]),t("td",[t("strong",[s._v("百分比（必填）")])]),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("进度条类型")]),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("进度条的宽度，单位 px")]),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("进度条显示文字内置在进度条内（只在 type=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("进度条当前状态")]),t("td",[s._v("string")]),t("td",[s._v("success/exception")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),t("td",[s._v("number")]),t("td"),t("td",[s._v("126")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("是否显示进度条文字内容")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])}]}},function(s,a,t){s.exports=t(301)},function(s,a,t){var l=t(13)(null,t(302),null,null,null);s.exports=l.exports},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"kuai-su-shang-shou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 
script:"\n  export default {\n    data () {\n      return {\n        radio3: '上海',\n        radio4: '上海',\n        radio5: '上海'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-radio-group",{model:{value:s.radio3,callback:function(a){s.radio3=a},expression:"radio3"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京"}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1),t("div",{staticStyle:{margin:"15px 0"}}),t("el-radio-group",{model:{value:s.radio4,callback:function(a){s.radio4=a},expression:"radio4"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京",disabled:!0}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1),t("div",{staticStyle:{margin:"15px 0"}}),t("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(a){s.radio5=a},expression:"radio5"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京"}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1)]],2),t("p",[s._v("只需要把"),t("code",[s._v("el-radio")]),s._v("元素换成"),t("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),t("code",[s._v("size")]),s._v("属性给按钮组，支持"),t("code",[s._v("large")]),s._v("和"),t("code",[s._v("small")]),s._v("两种（如果不设定为默认）。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hlj
}},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=[]}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),t("p",[s._v("适用广泛的基础单选")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="请选择">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-select",{attrs:{placeholder:"请选择"},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}})}))]],2),t("p",[t("code",[s._v("v-model")]),s._v("的值为当前被选中的"),t("code",[s._v("el-option")]),s._v("的 value 属性值")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),t("span",{staticClass:"
staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n        }],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("备选项进行分组展示")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="请选择">\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: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-select",{attrs:{placeholder:"请选择"},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}})}))}))]],2),t("p",[s._v("使用"),t("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),t("code",[s._v("label")]),s._v("属性为分组名")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"
href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("如果 Select 的绑定值为对象类型，请务必指定 "),t("code",[s._v("value-key")]),s._v(" 作为它的唯一性标识。")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("是否多选")]),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("是否禁用")]),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("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),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("输入框尺寸")]),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("单选时是否可以清空选项")]),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("多选时用户最多可以选择的项目数，为 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("select input 的 name 属性")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("占位符")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("请选择")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("是否可搜索")]),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("是否允许用户创建新条目，需配合 "),t("code",[s._v("filterable")]),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("自定义过滤方法")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("remote")]),t("td",[s._v("是否为远程搜索")]),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("远程搜索方法")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("是否正在从远程获取数据")]),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("远程加载时显示的文字")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("加载中")])]),t("tr",[t("td",[s._v("no-match-text")]),t("td",[s._v("搜索条件无匹配时显示的文字")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("无匹配数据")])]),t("tr",[t("td",[s._v("no-data-text")]),t("td",[s._v("选项为空时显示的文字")]),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("Select 下拉框的类名")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-first-option")]),t("td",[s._v("在输入框按下回车，选择第一
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" 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("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),t("td",[s._v("改变后的值")])])])])}]}},function(s,a,t){s.exports=t(326)},function(s,a,t){var l=t(13)(t(327),t(328),null,null,null);s.exports=l.exports},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),s._m(1),t("p",[s._v("简单的步骤条。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</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",slot:"source"},[t("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"步骤 1"}}),t("el-step",{attrs:{title:"步骤 2"}}),t("el-step",{attrs:{title:"步骤 3"}})],1),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),t("p",[s._v("设置"),t("code",[s._v("active")]),s._v("属性，接受一个"),t("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),t("code",[s._v("space")]),s._v("属性即可，它接受"),t("code",[s._v("Boolean")]),s._v("，单位为"),t("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),t("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClas
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" 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("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("switch 状态发生变化时的回调函数")]),t("td",[s._v("新状态的值")])])])])}]}},function(s,a,t){s.exports=t(336)},function(s,a,t){function l(s){t(337)}var n=t(13)(t(339),t(340),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(338);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("48c3de44",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}",""])},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date
staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),t("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("纵向内容过多时，可选择固定表头。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" height="250" border style="width: 100%">\n    <el-table-column prop="date" label="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎
},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("
},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),t("span",{static
staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),t("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: \'date\', order: \'descending\'}">\n    <el-table-column prop="date" label="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :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-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}})],1)]],2),t("p",[s._v("在列中设置"),t("code",[s._v("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),t("code",[s._v("Boolean")]),s._v("，默认为"),t("code",[s._v("false")]),s._v("。可以通过 Table 的"),t("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。可以使用"),t("code",[s._v("sort-method")]),s._v("使用自定义的排序规则。如果需要后端排序，需将"),t("code",[s._v("sortable")]),s._v("设置为"),t("code",[s._v("custom")]),s._v("，同时在 Table 上监听"),t("code",[s._v("sort-change")]),s._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),t("code",[s._v("formatter")]),s._v("属性，它用于格式化指定列的值，接受一个"),t("code",[s._v("Function")]),s._v("，会传入两个参数："),t("code",[s._v("row")]),s._v("和"),t("code",[s._v("column")]),s._v("，可以根据自己的需求进行处理。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language
},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),t("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData5" style="width: 100%">\n    <el-table-column type="expand">\n      <template scope="props">\n        <el-form label-position="left" inline class="demo-table-expand">\n          <el-form-item label="商品名称">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label="所属店铺">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label="商品 ID">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label="店铺 ID">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label="商品分类">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label="店铺地址">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label="商品描述">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column label="商品 ID" prop="id">\n    </el-table-column>\n    <el-table-column label="商品名称" prop="name">\n    </el-table-column>\n    <el-table-column label="描述" prop="desc">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData5: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市
staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"数值 2（元）"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"数值 3（元）"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"h
attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),t("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),t("p",[s._v("只需要设置 "),t("code",[s._v("type")]),s._v(" 属性为 "),t("code",[s._v("card")]),s._v(" 就可以使选项卡改变为标签风格。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"activeName2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("activeName2")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCl
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("选项卡标题")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("是否禁用")]),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("与选项卡 activeName 对应的标识符，表示选项卡别名")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("标签是否可关闭")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}]}},function(s,a,t){s.exports=t(346)},function(s,a,t){function l(s){t(347)}var n=t(13)(t(349),t(350),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(348);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("6cda174e",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}",""])},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"gray"},{name:"标签三",type:"primary"},{name:"标签四",type:"success"},{name:"标签五",type:"warning"},{name:"标签六",type:"danger"}],dynamicTags:["标签一","标签二","标签三"],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=""}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("用于标记和选择。")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="gray">标签二</el-tag>\n<el-tag type="primary">标签三</el-tag>\n<el-tag type="success">标签四</el-tag>\n<el-tag type="warning">标签五</el-tag>\n<el-tag type="danger">标签六</el-tag>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tag",[s._v("标签一")]),t("el-tag",{attrs:{type:"gray"}},[s._v("标签二")]),t("el-tag",{attrs:{type:"primary"}},[s._v("标签三")]),t("el-tag",{attrs:{type:"success"}},[s._v("标签四")]),t("el-tag",{attrs:{type:"warning"}},[s._v("标签五")]),t("el-tag",{attrs:{type:"danger"}},[s._v("标签六")])],1),t("p",[s._v("由"),t("code",[s._v("type")]),s._v("属性来选择tag的类型，也可以通过"),t("code",[s._v("color")]),s._v("属性来自定义背景色。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("标签一"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:
staticClass:"hljs-number"},[s._v("10")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),t("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker 时间选择器")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间点")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间点")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间范围")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间范围")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("完全只读")]),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("禁用")]),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("文本框可输入")]),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("是否显示清除按钮")]),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("输入框尺寸")]),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("占位内容")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("绑定值")]),t("td",[s._v("TimePicker: DateTimeSelect: String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("对齐方式")]),t("td",[s._v("string")]),t("td",[s._v("left, center, right")]),t("td",[s._v("left")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("TimePicker 下拉框的类名")]),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("当前时间日期选择器特有的选项参考下表")]),t("td",[s._v("object")]),t("td",[s._v(
staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[t("el-button",{on:{click:function(a){s.disabled=!s.disabled}}},[s._v("点击"+s._s(s.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"点击关闭 tooltip 功能"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("点击"),t("span",[s._v("{{")]),s._v("disabled ? '开启' : '关闭'"),t("span",[s._v("}}")]),s._v(" tooltip 功能"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip 文字提示")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主题")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Tooltip 组件提供了两个不同的主题："),t("code",[s._v("dark")]),s._v("和"),t("code",[s._v("light")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更多 Content")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 高级扩展")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[t("code",[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),t("code",[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),t("code",[s._v("tooltip")]),s._v(" 功能，"),t("code",[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"
staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer 穿梭框")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自定义")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数据项属性别名")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("默认情况下，Transfer 仅能识别数据项中的 "),t("code",[s._v("key")]),s._v("、"),t("code",[s._v("label")]),s._v(" 和 "),t("code",[s._v("disabled")]),s._v(" 字段。如果你的数据的字段名不同，可以使用 "),t("code",[s._v("props")]),s._v(" 属性为它们设置别名。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("Transfer 的数据源")]),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("是否可搜索")]),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("搜索框占位符")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("请输入搜索内容")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("自定义搜索方法")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("titles")]),t("td",[s._v("自定义列表标题")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['列表 1', '列表 2']")])]),t("tr",[t("td",[s._v("button-texts")]),t("td",[s._v("自定义按钮文案")]),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("自定义数据项渲染函数")]),t("td",[s._v("function(h, option)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("footer-format")]),t("td",[s._v("列表底部勾选状态文案")]),t("td",[s._v("object{noChecked, hasChecked}")]),t("td",[s._v("—")]),t("td",[s._v("{ noChecked: '共 ${total} 项', hasChecked: '已选 ${checked}/${total} 项' }")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("数据源的字段别名")]),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("初始状态下左侧列表的已勾选项的 key 数组")]),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("初始状态下右侧列表的已勾选
}]}],n=[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],e=1e3,i=[{name:"region1"},{name:"region2"}],v=1,_={label:"name",children:"zones"},c={children:"children",label:"label"};a.default={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)},loadNode:function(s,a){if(0===s.level)return a([{name:"region1"},{name:"region2"}]);if(s.level>3)return a([]);var t;t="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=t?[{name:"zone"+v++},{name:"zone"+v++}]:[],a(s)},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:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s,a){s.append({id:e++,label:"testtest",children:[]},a)},remove:function(s,a){s.remove(a)},renderContent:function(s,a){var t=this,l=a.node,n=a.data,e=a.store;return s("span",{style:"white-space: normal"},[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return t.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return t.remove(e,n)}}},["Delete"])])])},filterNode:function(s,a){return!s||a.label.indexOf(s)!==-1}},data:function(){return{data:t,data2:l,data3:n,regions:i,defaultProps:c,props:_,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("用清晰的层级结构展示信息，可展开或折叠。")]),s._m(1),t("p",[s._v("基础的树形结构展示。")]),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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s
},[s._v('"tree"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("通过 node 获取"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("通过 key 获取"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("通过 node 设置"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("通过 key 设置"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("清空"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("9")]
}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 树节点的选择")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义节点内容")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 节点过滤")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴模式")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},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("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("展示数据")]),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("内容为空的时候展示的文本")]),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("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("配置选项，具体看下表")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("load")]),t("td",[s._v("加载子树数据的方法")]),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("树节点的内容区的渲染 Function")]),t("td",[s._v("Function(h, { node }")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("highlight-current")]),t("td",[s._v("是否高亮当前选中节点，默认值是 false。")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("current-node-key")]),t("td",[s._v("当前选中节点的 key，只写属性")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("是否默认展开所有节点")]),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("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("auto-expand-parent")]),t("td",[s._v("展开子节点的时候是否自动展开父节点")]),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("默认展开的节点的 key 的数组")]),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("节点是否可被选择")]),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("在显示复选框的情况下，是否严格的遵循父子不互相
staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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/for