github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/1.3/zh-CN.541c8de.js

59 lines
1.9 MiB
JavaScript
Raw Normal View History

[deploy] 979ce8d - [release] 1.3.7
2017-06-18 14:11:52 +00:00
webpackJsonp([1,4],Array(34).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":35,"./component.vue":43,"./design.vue":49,"./guide.vue":57,"./index.vue":62,"./nav.vue":74,"./resource.vue":83};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=34},function(s,a,t){function l(s){t(36)}var n=t(13)(t(38),t(42),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(37);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("459b2d36",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(39),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&&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(40)},function(s,a,t){var l=t(13)(null,t(41),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-3-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(
attrs:{id:"1-0-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),t("p",[t("em",[s._v("2016-12-02")])]),t("ul",[t("li",[s._v("新增 Input Number 的 "),t("code",[s._v("controls")]),s._v(" 属性，#1473")]),t("li",[s._v("修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514")]),t("li",[s._v("增加 Notification 的 "),t("code",[s._v("offset")]),s._v(" 属性，#1419")]),t("li",[s._v("修复 Slider 在快速拖动时取值不准确的问题，#1458")]),t("li",[s._v("修复 Slider 在某些情况下绑定值为多位小数的问题，#1450")]),t("li",[s._v("修复 Select 在某些情况下绑定值和显示值不同步的问题")]),t("li",[s._v("新增 Select 的 "),t("code",[s._v("multiple-limit")]),s._v(" 和 "),t("code",[s._v("allow-create")]),s._v(" 属性")]),t("li",[s._v("修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438")]),t("li",[s._v("修复 Tree 有时在获取子级数据后视图不更新的问题，#1439")]),t("li",[s._v("修复 Table 在 windows 系统下的若干样式问题，#1464 #1507")]),t("li",[s._v("修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451")]),t("li",[s._v("新增 Table 的 "),t("code",[s._v("row-dblclick")]),s._v(" 事件，#1362")])]),t("h3",{attrs:{id:"1-0-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),t("p",[t("em",[s._v("2016-11-28")])]),t("ul",[t("li",[s._v("修复 Pagination 的 "),t("code",[s._v("currentPage")]),s._v(" 在某些情况下设置无效的情况，#1336")]),t("li",[s._v("修复 DatePicker 为 "),t("code",[s._v("month")]),s._v(" 且设置了 "),t("code",[s._v("disabledDate")]),s._v(" 的情况下切换年份时界面未更新的问题，#1158")]),t("li",[s._v("修复 DatePicker readonly 时未禁用清除按钮的问题，#1238")]),t("li",[s._v("修复 Slider 绑定值为 "),t("code",[s._v("NaN")]),s._v(" 以及 "),t("code",[s._v("step")]),s._v(" 小于 1 时无法正常工作的问题，#1239 #1282")]),t("li",[s._v("增加 Table 的多表头功能，#1312")]),t("li",[s._v("增加 Table 的 "),t("code",[s._v("rowStyle")]),s._v(" 属性，#1348")]),t("li",[s._v("修复 TableColumn 的某些属性无法动态设置的问题，#1314")]),t("li",[s._v("增加 Tree 的 "),t("code",[s._v("filter-node-method")]),s._v(" 属性和 "),t("code",[s._v("filter")]),s._v(" 方法，#1257")]),t("li",[s._v("增加 Tree 的 "),t("code",[s._v("getCheckedKeys")]),s._v(" 和 "),t("code",[s._v("setCheckedKeys")]),s._v(" 方法，#1254")]),t("li",[s._v("重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152")]),t("li",[s._v("修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359")]),t("li",[s._v("增加 Form 中深对象验证的支持，#1363")]),t("li",[s._v("增加 Autocomplete 里的 "),t("code",[s._v("append")]),s._v(" 和 "),t("code",[s._v("prepend")]),s._v(" API，#1369")]),t("li",[s._v("增加 Pagination "),t("code",[s._v("pageSizes")]),s._v(" 属性的动态支持，#1372")]),t("li",[s._v("增加 Radio Button 自定义选中按钮样式的 API，#1380")]),t("li",[s._v("增加 Menu Group 支持通过 slot 来设置 title，#1382")]),t("li",[s._v("修复 DatePicker 选择年的 bug，#1385")]),t("li",[s._v("新增 Upload 默认已上传的文件列表 API，#1393")]),t("li",[s._v("增加 Checkbox "),t("code",[s._v("label")]),s._v(" 属性绑定的多类型支持，#1400")]),t("li",[s._v("增加 Tree 的 "),t("code",[s._v("setChecked")]),s._v(" 方法，#1422")])]),t("h3",{attrs:{id:"1-0-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),t("p",[t("em",[s._v("2016-11-18")])]),t("ul",[t("li",[s._v("新增 Table "),t("code",[s._v("context")]),s._v(" 属性，可以指定自定义 column 内部可获取的上下文，#1161")]),t("li",[s._v("新增 多种语言支持")]),t("li",[s._v("修复 没有正确动态渲染语言的问题，#1160")]),t("li",[s._v("<EFBFBD><EFBFBD>
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk
var o=r.default[h];r.default[h]={list:o,mapped:n(o)}}a.default={defaultLocale:p,supports:function(s){return i.default.isObject(r.default[s])},randomCharNear:function(s,a){if(!this.supports(a))throw new Error('locale "'+a+'" is not supported');var t=r.default[a].mapped,l=1,n=[],e=/[A-Z]/.test(s);s=s.toLowerCase();var i=t[s]||[],v=void 0;for(var c in t)t.hasOwnProperty(c)&&c!==s&&(v=t[c],Math.abs(i.x-v.x)<=l&&Math.abs(i.y-v.y)<=l&&n.push(c));var p=n.length>0?n[_.default.random(0,n.length-1)]:this.randomChar(a);return e&&(p=p.toUpperCase()),p},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var a=r.default[s].list.join("");return a.charAt(_.default.random(0,a.length-1))}},s.exports=a.default},function(s,a){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,a,t){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){var a=s.match(/<([^\s>]+)/);return Boolean(a)&&i.default.indexOf(a[1].toLowerCase())>-1}Object.defineProperty(a,"__esModule",{value:!0});var e=t(7),i=l(e);a.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var a=/<[^>]+>/gi,t=[],l=[],e=void 0,i=void 0;e=a.exec(s);)i={tagName:e[0],position:e.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||n(i.tagName)||l.push(i),t.push(i);return t},inject:function(s,a){for(var t=0,l=void 0;t<a.length;t++)l=a[t],s.length>0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.position<s.length&&(s+=l.tagName);return s}},s.exports=a.default},function(s,a){s.exports=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]}])})},function(s,a,t){s.exports={render:function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(69),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(70),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:t(71),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n ")])],1)])])])])},staticRenderFns:[function(){var s=this,a=s.$createElement,l=s._self._c||a;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:t(72),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:t(73),alt:"Element"}})])])}]}},function(s,a,t){s.exports=t.p+"static/guide.0a8462c.png"},function(s,a,t){s.exports=t.p+"static/component.bd3411b.png"},function(s,a,t){s.ex
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
},function(s,a){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOS
[deploy] 979ce8d - [release] 1.3.7
2017-06-18 14:11:52 +00:00
staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),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("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),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-badge")]),s._v(">")]),s._v("\n\n"),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("trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"click"')]),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('"el-dropdown-link"')]),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-caret-bottom el-icon--right"')]),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("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(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n 评论\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),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("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n 回复\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),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-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\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:"
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 显示颜色"),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("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"success"')]),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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"warning"')]),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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"danger"')]),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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"info"')]),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("span")]),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")])])])]),s._m(4),t("p",[s._v("带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="edit"></el-button>\n<el-button type="primary" icon="share"></el-button>\n<el-button type="primary" icon="delete"></el-button>\n<el-button type="primary" icon="search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}}),t("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("搜索")]),t("el-button",{attrs:{type:"primary"}},[s._v("上传"),t("i",{staticClass:"el-icon-upload el-icon--right"})])],1),t("p",[s._v("设置"),t("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),t("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("spa
staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("expor
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 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(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},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("setActiveItem")]),t("td",[s._v("手动切换幻灯片")]),t("td",[s._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),t("code",[s._v("el-carousel-item")]),s._v(" 的 "),t("code",[s._v("name")]),s._v(" 属性值")])]),t("tr",[t("td",[s._v("prev")]),t("td",[s._v("切换至上一张幻灯片")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next")]),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:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item 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("name")]),t("td",[s._v("幻灯片的名字，可用作 "),t("code",[s._v("setActiveItem")]),s._v(" 的参数")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("该幻灯片所对应指示器的文本")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}]}},function(s,a,t){s.exports=t(166)},function(s,a,t){function l(s){t(167)}var n=t(13)(t(169),t(170),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(168);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("089d345f",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"},{value:"typography",label:"Typography 字体"},{value:"icon",label:"Icon 图标"},{value:"button",label:"Button 按钮"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio 单选框"},{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
},[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-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[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("v
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(4),t("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" :show-all-levels="false"></el-cascader>\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: '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 }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(a){s.selectedOptions3=a},expression:"selectedOptions3"}})],1),t("p",[s._v("默认值通过数组的方式指定。")]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),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-
},[s._v("'basic'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),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("'layout'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n }]\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 "),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("'radio'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("
},[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",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),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 "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),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("'basic'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),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("'layout'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v
[deploy] 979ce8d - [release] 1.3.7
2017-06-18 14:11:52 +00:00
staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked2")]),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(3),t("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox-group v-model="checkList">\n <el-checkbox label="复选框 A"></el-checkbox>\n <el-checkbox label="复选框 B"></el-checkbox>\n <el-checkbox label="复选框 C"></el-checkbox>\n <el-checkbox label="禁用" disabled></el-checkbox>\n <el-checkbox label="选中且禁用" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['选中且禁用','复选框 A']\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-checkbox-group",{model:{value:s.checkList,callback:function(a){s.checkList=a},expression:"checkList"}},[t("el-checkbox",{attrs:{label:"复选框 A"}}),t("el-checkbox",{attrs:{label:"复选框 B"}}),t("el-checkbox",{attrs:{label:"复选框 C"}}),t("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2),t("p",[t("code",[s._v("checkbox-group")]),s._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),t("code",[s._v("v-model")]),s._v("绑定"),t("code",[s._v("Array")]),s._v("类型的变量即可。 "),t("code",[s._v("el-checkbox")]),s._v(" 的 "),t("code",[s._v("label")]),s._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),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-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),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('"复选框 A"')]),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('"复选框 B"')]),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('"复选框 C"')]),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('"禁用"')
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(a){s.activeNames=a},expression:"activeNames"}},[t("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[t("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[t("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[t("div",[s._v("简化流程：设计简洁直观的操作流程；")]),t("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[t("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],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-collapse")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),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("div")]),s._v(">")]),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:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),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:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),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("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-nam
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
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-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","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("show-alpha")]),t("td",[s._v("是否支持透明度选择")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color-format")]),t("td",[s._v("写入 v-model 的颜色的格式")]),t("td",[s._v("string")]),t("td",[s._v("hsl / hsv / hex / rgb")]),t("td",[s._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])])])])},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(190)},function(s,a,t){function l(s){t(191)}var n=t(13)(null,t(193),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(192);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("52378960",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}",""])},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("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),s._m(1),t("p",[s._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{att
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
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",{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\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("value3")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("value5")]),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(3),t("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value7" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: '最近一周',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近一个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近三个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("默认")]),t("el-date-picker",{attrs:{type:"daterange",placeholder:"选择日期范围"},model:{value:s.value6,callback:function(a){s.value6=a},expression:"value6"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),t("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"选择日期范围","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}})],1)]],2),t("div",{staticClass:"highlight
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
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",{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("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("pickerOptions2")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),t("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n onClick(picker) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),t("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),t("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),t("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),t("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n onClick(picker) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),t("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),t("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v("
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._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 "),t("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("form")]),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("region")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hlj
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(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),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-caret-bottom el-icon--right"')]),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("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(" "),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-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(" "),t("span",{staticClass:"hljs-attr"},[s._v("divided")]),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")])])])]),s._m(6),t("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),t("demo-block",{staticClass:"demo-box",attrs:{
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
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:"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('"form.resource"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),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")]),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("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-input")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),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(">")]),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('"onSubmit"')]),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-
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"},[s._v('"11"')]),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("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),t("span",{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('"ruleForm.date1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),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("el-form-item")]),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-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),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('"11"')]),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("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),t("span",{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
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
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("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\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 callback();\n }\n };\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n { "),t("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),t("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n { "),t("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),t("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n { "),t("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),t("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n
[deploy] 979ce8d - [release] 1.3.7
2017-06-18 14:11:52 +00:00
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-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),t("span",{staticClass:"hljs-comment"},[s._v("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),t("span",{staticClass:"hljs-comment"},[s._v("// 引入组件")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),t("p",[s._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),t("p",[t("strong",[s._v("webpack.config.js")])]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[s._v("{\n "),t("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),t("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),t("h2",{attrs:{id:"jian-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),t("code",[s._v("vue-i18n@5.x")])]),t("p",[s._v("Element 兼容 "),t("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v("，搭配使用能更方便地实现多语言切换。")]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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(" VueI18n "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),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(" enLocale "),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(" zhLocale "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"}
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("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num5"')]),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("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num6"')]),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("num4")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("num6")]),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(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},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:"jin-yong-zhuang-tai"}},[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:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("额外提供了 "),t("code",[s._v("large")]),s._v("、"),t("code",[s._v("small")]),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("value")]),t("td",[s._v("绑定值")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("设置计数器允许的
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("div",{staticClass:"demo-input-size"},[t("el-input",{attrs:{size:"large",placeholder:"请输入内容"},model:{value:s.input6,callback:function(a){s.input6=a},expression:"input6"}}),t("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input7,callback:function(a){s.input7=a},expression:"input7"}}),t("el-input",{attrs:{size:"small",placeholder:"请输入内容"},model:{value:s.input8,callback:function(a){s.input8=a},expression:"input8"}}),t("el-input",{attrs:{size:"mini",placeholder:"请输入内容"},model:{value:s.input9,callback:function(a){s.input9=a},expression:"input9"}})],1)]),t("p",[s._v("可通过 "),t("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),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('"demo-input-size"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"large"')]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input6"')]),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("el-input")]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input7"')]),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("el-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input8"')]),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("el-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mini"')]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input9"')]),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\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("
style:"\n.my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n"}}},[t("div",{staticClass:"source",slot:"source"},[t("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(a){s.state3=a},expression:"state3"}})],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("popper-class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"my-item-zh"')]),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-attr"},[s._v("icon")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),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:"undefined"},[s._v("\n.my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),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 Vue.component("),t("span",{staticClass:"hljs-string"},[s._v("'my-item-zh'")]),s._v(", {\n "),t("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),t("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),t("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n h("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),t("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(" } }, [item.value]),\n h("),t("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),t("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(":
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),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('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),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('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),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('"元丰天山花园(东门) 双流路267号"')]),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('"上海市长宁区通协路"')]),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('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),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('"长宁区仙霞西路88号1305室"')]),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('"上海市普陀区真北路818号近铁城市<EFBFBD><EFBFBD>
script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",slot:"source"},[t("el-row",[t("el-col",{attrs:{span:24}},[t("div",{staticClass:"grid-content bg-purple-dark"})])],1),t("el-row",[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),t("code",[s._v("span")]),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-row")]),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('"24"')]),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-dark"')]),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(">")]),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('"12"')]),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",{static
script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("通过制定 col 组件的 "),t("code",[s._v("offset")]),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-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('"6"')]),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('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),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('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),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",{staticCla
},[s._v("border-radius")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("36px")]),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(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:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-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:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("通过 "),t("code",[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸："),t("code",[s._v("xs")]),s._v("、"),t("code",[s._v("sm")]),s._v("、"),t("code",[s._v("md")]),s._v("和"),t("code",[s._v("lg")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row 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("gutter")]),t("td",[s._v("栅格间隔")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[
script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},[s._v("我的工作台")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),t("el-menu-item",{attrs:{index:"3"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1),t("div",{staticClass:"line"}),t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},[s._v("我的工作台")]),t("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),t("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),t("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),t("el-menu-item",{attrs:{index:"3"}},[t("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1)],1),t("p",[s._v("导航菜单默认为垂直模式，通过 "),t("code",[s._v("mode")]),s._v(" 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 "),t("code",[s._v("submenu")]),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-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),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"')]),s._v(">")]),s._v("处理中心"),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-submenu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),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("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")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2-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("
staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),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-message"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),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('"2"')]),s._v(">")]),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-message"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),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('"分组二"')]),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('"3"')]),s._v(">")]),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-message"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),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('"4"')]),s._v(">")]),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-message"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航四"),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")]),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\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 handleOpen(key, keyP
return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-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:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-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:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#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:"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 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 "),t("code",[s._v("MessageBox")]),s._v("。")])},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("p",[s._v("单独引入 "),t("code",[s._v("MessageBox")]),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(" { MessageBox } "),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("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("MessageBox 标题")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("MessageBox 消息正文内容")]),t("td",[s._v("string / VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("消息类型，用于显示图标")]),t("td",[s._v("string")]),t("td",[s._v("success/info/warning/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("MessageBox 的自定义类名")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("callback")]),t("td",[s._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),t("td",[s._v("function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("beforeClose")]),t("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),t("td",[s._v("function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lockScroll")]),t("td",[s._v("是否在 MessageBox 出现时将 body 滚动锁定")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n 成功\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n 警告\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n 消息\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n 错误\n ")])]],2),t("p",[s._v("Element 为 Notification 组件准备了四种通知类型："),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("warning")]),s._v(", "),t("code",[s._v("info")]),s._v(", "),t("code",[s._v("error")]),s._v("。通过"),t("code",[s._v("type")]),s._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),t("code",[s._v("type")]),s._v("字段的情况下像"),t("code",[s._v("open5")]),s._v("和"),t("code",[s._v("open6")]),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("\n "),t("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n 成功\n "),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("\n "),t("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n 警告\n "),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("\n "),t("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n 消息\n "),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("\n "),t("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n 错误\n "),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 open3() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\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("message")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n
},[s._v("`每页 "),t("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("`当前页: "),t("span",{staticClass:"hljs-subst"},[s._v("${val}")]),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("currentPage1")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("4")]),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),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination 分页")])},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:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","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-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","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("small")]),t("td",[s._v("是否使用小型分页样式")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("page-size")]),t("td",[s._v("每页显示条目个数")]),t("td",[s._v("Number")]),t("td",[s._v("—")]),t("td",[s._v("10")])]),t("tr",[t("td",[s._v("total")]),t("td",[s._v("总条目数")]),t("td",[s._v("Number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("page-count")]),t("td",[s._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),t("td",[s._v("Number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("current-page")]),t("td",[s._v("当前页数，支持 .sync 修饰符")]),t("td",[s._v("Number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("layout")]),t("td",[s._v("组件布局，子组件名用逗号分隔")]),t("td",[s._v("String")]),t("td",[t("code",[s._v("sizes")]),s._v(", "),t("code",[s._v("prev")]),s._v(", "),t("code",[s._v("pager")]),s._v(", "),t("code",[s._v("next")]),s._v(", "),t("code",[s._v("jumper")]),s._v(", "),t("code",[s._v("->")]),s._v(", "),t("code",[s._v("total")]),s._v(", "),t("code",[s._v("slot")])]),t("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),t("tr",[t("td",[s._v("page-sizes")]),t("td",[s._v("每页显示个数<EFBFBD><EFBFBD>
staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),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(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"70"')]),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(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),t("span",{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(":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(2),t("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),t("p",[s._v("Progress 组件可通过 "),t("code",[s._v("stroke-width")]),s._v(" 属性更改进度条的高度，并可通过 "),t("code",[s._v("text-inside")]),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-progress")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),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(":text-inside")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticCla
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("radio")]),s._v(": "),t("span",{staticClass:"hljs-string"},[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(2),t("p",[s._v("单选框不可用的状态。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: '选中且禁用'\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("备选项")]),t("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:s.radio1,callback:function(a){s.radio1=a},expression:"radio1"}},[s._v("备选项")])]],2),t("p",[s._v("注意：请牢记，选中的条件是绑定的变量值等于"),t("code",[s._v("label")]),s._v("中的值。只要在"),t("code",[s._v("el-radio")]),s._v("元素中设置"),t("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),t("code",[s._v("Boolean")]),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("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio")]),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("radio1")]),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(3),t("p",[s._v("适用于在多个互斥的选项中选择的场景")
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(4),t("p",[s._v("只读的评分用来展示分数，允许出现半星")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value}">\n</el-rate>\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value}"},model:{value:s.value5,callback:function(a){s.value5=a},expression:"value5"}})],1),t("p",[s._v("为组件设置 "),t("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),t("code",[s._v("show-text")]),s._v("，则会在右侧显示目前的分值。可以提供 "),t("code",[s._v("text-template")]),s._v(" 作为显示模板，模板为一个包含了 "),t("code",[s._v("{value}")]),s._v(" 的字符串，"),t("code",[s._v("{value}")]),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-rate")]),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("disabled")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-rate")]),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("value5")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("3.7")]),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)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},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:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助文字")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-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:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","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",{staticCl
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:"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("'选项2'")]),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("'选项3'")]),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("'选项4'")]),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("'选项5'")]),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("value5")]),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("p",[s._v("可以自定义备选项")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value6" placeholder="请选择">\n <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">\n <span style="float: left">{{ item.label }}</span>\n <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: '北京'\n }, {\n value: 'Shanghai',\n label: '上海'\n }, {\n value: 'Nanjing',\n label: '<EFBFBD>
},[s._v("this")]),s._v(".states.map("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n });\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\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("this")]),s._v(".loading = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),t("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n });\n }, "),t("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\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(10),t("p",[s._v("可以创建并选中选项中不存在的条目")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value10" multiple filterable="" allow-create placeholder="请选择文章标签">\n <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"请选择文章标签"},model:{value:s.value10,callback:function(a){s.value10=a},expression:"value10"}},s._l(s.options5,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[s._v("使用"),t("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),t("code",[s._v("filterable")]),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("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hl
staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-slider")]),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("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("value8")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),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),t("p",[s._v("支持选择某一数值范围")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value9" range="" show-stops :max="10">\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(a){s.value9=a},expression:"value9"}})],1)]],2),t("p",[s._v("设置"),t("code",[s._v("range")]),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("el-slider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),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-slider")]),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("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("value9")]),s._v(": ["),t("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n }\n }\n }\
script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(a){s.value1=a},expression:"value1"}}),t("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(a){s.value2=a},expression:"value2"}})],1),t("p",[s._v("绑定"),t("code",[s._v("v-model")]),s._v("到一个"),t("code",[s._v("Boolean")]),s._v("类型的变量。可以使用"),t("code",[s._v("on-text")]),s._v("属性与"),t("code",[s._v("off-text")]),s._v("属性来设置开关的文字描述，使用"),t("code",[s._v("on-color")]),s._v("属性与"),t("code",[s._v("off-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-switch")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("off-text")]),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(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-switch")]),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("value1")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("value2")]),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("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip :content="\'Switch value: \' + value3" placement="top">\n <el-switch v-model="value3" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">\n </el-switch>\n</el-tooltip>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '100'\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[t("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1)],1),t("p",[s._v("设置"),t("code",[s._v("on-value")]),s._v("和"),t("code",[s._v("off-value")]),s._v("属性，接受"),t("code",[s._v("Boolean")]),s._v(", "),t("code",[s._v("String")]),s._v("或"),t("code",[s._v("Number")]),s._v("类型的值。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),t("p",[s._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),t("code",[s._v("border")]),s._v("属性，它接受一个"),t("code",[s._v("Boolean")]),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("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),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('"date"')]),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('"180"')]),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('"name"')]),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('"180"')]),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(">")]),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("tableData")]),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
},[s._v('"handleClick"')]),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("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),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("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),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("template")]),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 "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick() {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n }\n },\n\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("tableData")]),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("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs
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("\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("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-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("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-08'")]),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",
[deploy] 979ce8d - [release] 1.3.7
2017-06-18 14:11:52 +00:00
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: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-08',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-06',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-07',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"","tooltip-effect":"dark"},on:{"selection-change":s.handleSelectionChange}},[t("el-table-column",{attrs:{type:"selection",width:"55"}}),t("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:s._u([["default",function(a){return[s._v(s._s(a.row.date))]}]])}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),t("div",{staticStyle:{"margin-top":"20px"}},[t("el-button",{on:{click:function(a){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("切换第二、第三行的选中状态")]),t("el-button",{on:{click:function(a){s.toggleSelection()}}},[s._v("取消选择")])],1)]],2),t("p",[s._v("实现多选非常简单: 手动添加一个"),t("code",[s._v("el-table-column")]),s._v("，设"),t("code",[s._v("type")]),s._v("属性为"),t("code",[s._v("selection")]),s._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),t("code",[s._v("show-overflow-tooltip")]),s._v("属性，它接受一个"),t("code",[s._v("Boolean")]),s._v("，为"),t("code",[s._v("true")]),s._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")]),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-table")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("tooltip-effect")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[t("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:s._u([["default",function(a){return[t("el-icon",{attrs:{name:"time"}}),t("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(a.row.date))])]}]])}),t("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:s._u([["default",function(a){return[t("el-popover",{attrs:{trigger:"hover",placement:"top"}},[t("p",[s._v("姓名: "+s._s(a.row.name))]),t("p",[s._v("住址: "+s._s(a.row.address))]),t("div",{staticClass:"name-wrapper",slot:"reference"},[t("el-tag",[s._v(s._s(a.row.name))])],1)])]}]])}),t("el-table-column",{attrs:{label:"操作"},scopedSlots:s._u([["default",function(a){return[t("el-button",{attrs:{size:"small"},on:{click:function(t){s.handleEdit(a.$index,a.row)}}},[s._v("编辑")]),t("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(t){s.handleDelete(a.$index,a.row)}}},[s._v("删除")])]}]])})],1)]],2),t("p",[s._v("通过 "),t("code",[s._v("Scoped slot")]),s._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。("),t("code",[s._v("1.1")]),s._v(" 后支持通过 "),t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(" 自定义模板。之前的 "),t("code",[s._v("inline-template")]),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-table")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),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("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('"180"')]),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("scope")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"}
script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: '王小虎',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: '王小虎',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: '王小虎',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: '王小虎',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: '王小虎',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = '总价';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n sums[index] += ' 元';\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名"}}),t("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),t("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),t("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),t("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[t("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名"}}),t("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),t("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),t("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2),t("p",[s._v("将"),t("code",[s._v("show-summary")]),s._v("设置为"),t("code",[s._v("true")]),s._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),t("code",[s._v("sum-text")]),s._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),t("code",[s._v("summary-method")]),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-table")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "
}]}},function(s,a,t){s.exports=t(347)},function(s,a,t){var l=t(13)(t(348),t(349),null,null,null);s.exports=l.exports},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleClick:function(s,a){console.log(s,a)},handleTabsEdit:function(s,a){var t=this;if("add"===a){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===a&&!function(){var a=t.editableTabs,l=t.editableTabsValue;l===s&&a.forEach(function(t,n){if(t.name===s){var e=a[n+1]||a[n-1];e&&(l=e.name)}}),t.editableTabsValue=l,t.editableTabs=a.filter(function(a){return a.name!==s})}()},addTab:function(s){var a=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:a,content:"New Tab content"}),this.editableTabsValue2=a},removeTab:function(s){var a=this.editableTabs2,t=this.editableTabsValue2;t===s&&a.forEach(function(l,n){if(l.name===s){var e=a[n+1]||a[n-1];e&&(t=e.name)}}),this.editableTabsValue2=t,this.editableTabs2=a.filter(function(a){return a.name!==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:'<template>\n <el-tabs v-model="activeName" @tab-click="handleClick">\n <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'second'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(a){s.activeName=a},expression:"activeName"}},[t("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),t("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),t("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),t("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),t("p",[s._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),t("code",[s._v("value")]),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('"activeName"')]),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(">")])
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
},[s._v("'2'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),t("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\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(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 标签页")])},function(){var s=this,a=s.$createElement,t=s._s
staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),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-time-picker")]),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("value2")]),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("18")]),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(3),t("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n <el-time-select placeholder=\"起始时间\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"结束时间\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(a){s.startTime=a},expression:"startTime"}}),t("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(a){s.endTime=a},expression:"endTime"}})]],2),t("div",{staticClass:"highlight",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-time-select")]),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("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"结束时间"')
staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),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-tooltip")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Bottom Center 提示文字"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),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-tooltip")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Bottom Right 提示文字"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),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-tooltip")]),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(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"undefined"},[s._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 60px;\n }\n\n .right {\n float: right;\n width: 60px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[s._v("Dark")])],1),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
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-transfer")]),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(".transfer-footer")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),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("const")]),s._v(" generateData = "),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),t("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),t("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("`备选项 "),t("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),t("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),t("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"xml"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")])]),s._v(";\n }\n };\n },\n\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\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-transfer v-model="value4" :props="{\n key: \'value\',\n label: \'desc\'\n }" :data="data3">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15;
[deploy] a39db2c - [release] 1.3.6
2017-06-09 12:43:25 +00:00
staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"show3"')]),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('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),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('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),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(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),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(">")]),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("data")]),s._v(": "),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),t("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),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(".transition-box")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("20px")]),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(6),s
[deploy] 49c970c - [release] 1.3.5
2017-06-03 13:05:56 +00:00
}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),t("div",{staticClass:"buttons"},[t("el-button",{on:{click:s.getCheckedNodes}},[s._v("通过 node 获取")]),t("el-button",{on:{click:s.getCheckedKeys}},[s._v("通过 key 获取")]),t("el-button",{on:{click:s.setCheckedNodes}},[s._v("通过 node 设置")]),t("el-button",{on:{click:s.setCheckedKeys}},[s._v("通过 key 设置")]),t("el-button",{on:{click:s.resetChecked}},[s._v("清空")])],1)],1),t("p",[s._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),t("code",[s._v("node-key")]),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-tree")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[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:"
staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\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(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree 树形控件")])},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-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-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:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","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("st
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[t("i",{staticClass:"el-icon-plus"})]),t("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(a){s.dialogVisible=a},expression:"dialogVisible"}},[t("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],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-upload")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),t("span",{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",{