element/1.4/zh-CN.600ed9e.js

webpackJsonp([1,4],Array(29).concat([function(s,a,t){function l(s){return t(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./changelog.vue":30,"./component.vue":38,"./design.vue":44,"./guide.vue":52,"./index.vue":57,"./nav.vue":69,"./resource.vue":78};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=29},function(s,a,t){function l(s){t(31)}var n=t(13)(t(33),t(37),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(32);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("306347c8",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,'.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}',""])},function(s,a,t){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}a.__esModule=!0;var n=t(34),e=l(n);a.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,a=s.$el.children,t=a[1].querySelector("a");t&&t.remove();for(var l=a[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=a.length,i=2;i<e;i++){var v=a[i];t=a[i].querySelector("a"),t&&"header-anchor"===t.getAttribute("class")&&t.remove(),"H3"!==v.tagName?n+=a[i].outerHTML:(l=a[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,a,t){s.exports=t(35)},function(s,a,t){var l=t(13)(null,t(36),null,null,null);s.exports=l.exports},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"geng-xin-ri-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),t("h3",{attrs:{id:"1-4-12"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-4-1
href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),t("p",[t("em",[s._v("2017-01-17")])]),t("ul",[t("li",[s._v("修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451")]),t("li",[s._v("新增 Collapse "),t("code",[s._v("value")]),s._v(" 属性增加对 "),t("code",[s._v("Number")]),s._v(" 类型的支持，#2455")])]),t("h3",{attrs:{id:"1-1-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),t("p",[t("em",[s._v("2017-01-16")])]),t("ul",[t("li",[s._v("修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329")]),t("li",[s._v("修复 Menu 在启用 router 模式后没有对 "),t("code",[s._v("$route")]),s._v(" 变化进行响应的问题，#2391")]),t("li",[s._v("修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354")]),t("li",[s._v("修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。")]),t("li",[s._v("新增 Input 增加点击图标后的钩子函数属性，#2414")]),t("li",[s._v("新增 Radio Group 的 "),t("code",[s._v("disabled")]),s._v(" 属性，#2411")]),t("li",[s._v("新增 Tree 增加 "),t("code",[s._v("accordion")]),s._v(" 属性，#2408")]),t("li",[s._v("新增 Form 增加 "),t("code",[s._v("show-message")]),s._v(" 属性，#2356")]),t("li",[s._v("修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）")]),t("li",[s._v("修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353")]),t("li",[s._v("修复 DatePicker 初始值为 null 显示 1970，#2388")]),t("li",[s._v("修复 Table 缺少 filteredValue 属性，#2348")]),t("li",[s._v("修复 Table 空数据时且存在滚动条时的样式，#2396")]),t("li",[s._v("新增 MessageBox 的 "),t("code",[s._v("beforeClose")]),s._v(" 属性，#2204")]),t("li",[s._v("修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389")])]),t("p",[s._v("非兼容性更新")]),t("ul",[t("li",[s._v("1.1.3 新增的 "),t("code",[s._v("default-sort-prop")]),s._v(" 和 "),t("code",[s._v("default-sort-order")]),s._v(" 属性现在合并为一个对象类型属性")])]),t("h3",{attrs:{id:"1-1-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),t("p",[t("em",[s._v("2017-01-09")])]),t("ul",[t("li",[s._v("修复 DatePicker 页面加载后首次清空不会触发 "),t("code",[s._v("change")]),s._v(" 事件，#2167")]),t("li",[s._v("修复 DatePicker 选择下一年时，年份计算错误，#2152")]),t("li",[s._v("新增 Table 的 "),t("code",[s._v("default-sort-prop")]),s._v(" 和 "),t("code",[s._v("default-sort-order")]),s._v(" 属性，#2182（by @njleonzhang）")]),t("li",[s._v("修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196")]),t("li",[s._v("新增自定义 i18n 处理方法，方便和除了 "),t("code",[s._v("vue-i18n")]),s._v(" 之外的插件使用，#2129")]),t("li",[s._v("新增 Input "),t("code",[s._v("resize")]),s._v(" 属性，#2263（by @Kingwl）")]),t("li",[s._v("修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247")]),t("li",[s._v("修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）")]),t("li",[s._v("修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192")])]),t("h3",{attrs:{id:"1-1-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),t("p",[t("em",[s._v("2016-12-30")])]),t("ul",[t("li",[s._v("修复 Vue 2.1.7 升级导致的 Table "),t("code",[s._v("sortable")]),s._v(" 和 "),t("code",[s._v("fixed")]),s._v(" 无法使用的问题")]),t("li",[s._v("修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098")]),t("li",[s._v("移除 Collapse 的 "),t("code",[s._v("title")]),s._v(" scoped slot, 并新增 "),t("code",[s._v("title")]),s._v(" named slot，#2100")]),t("
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("strong",[s._v("用户决策：")]),s._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[s._v("结果可控：")]),s._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}]}},function(s,a){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgT
},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,a,t){function l(s){t(58)}var n=t(13)(t(60),t(63),l,"data-v-f954b68e",null);s.exports=n.exports},function(s,a,t){var l=t(59);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("b0404fb8",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,'.actor[data-v-f954b68e]{min-height:65px}.actor[data-v-f954b68e]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-f954b68e]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-f954b68e]{position:relative}.banner img[data-v-f954b68e]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-f954b68e]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-f954b68e]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-f954b68e]{padding-top:110px;padding-left:30px;font-size:46px;position:relative;z-index:10}.banner-desc h2[data-v-f954b68e]{font-size:46px;margin:0;color:#fff}.banner-desc p[data-v-f954b68e]{font-size:14px;opacity:.8;width:420px;line-height:1.8;padding-left:3px}.cards[data-v-f954b68e]{margin:0 auto 110px;width:1140px}.cards .container[data-v-f954b68e]{padding:0;margin:0 -11px;width:auto}.cards .container[data-v-f954b68e]:after,.cards .container[data-v-f954b68e]:before{display:table;content:""}.cards .container[data-v-f954b68e]:after{clear:both}.cards li[data-v-f954b68e]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-f954b68e]{width:160px;height:120px}.card[data-v-f954b68e]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-f954b68e]{margin:66px auto 60px}.card h3[data-v-f954b68e]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-f954b68e]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.8}.card a[data-v-f954b68e]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-f954b68e]:hover{color:#fff;background:#20a0ff}.card[data-v-f954b68e]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-f954b68e],.cards[data-v-f954b68e]{width:100%}.banner .container[data-v-f954b68e]{width:100%;box-sizing:border-box}.banner img[data-v-f954b68e]{right:0}}@media (max-width:1000px){.banner .container img[data-v-f954b68e]{display:none}}@media (max-width:768px){.cards li[data-v-f954b68e]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-f954b68e]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-f954b68e],.banner-stars[data-v-f954b68e]{display:none}.banner-desc h2[data-v-f954b68e]{font-size:32px}.banner-desc p[data-v-f954b68e]{width:auto}}',""])},function(s,a,t){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}a.__esModule=!0;var n=t(61),e=l(n);a.default={mounted:function(){function s(a){a.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师
},function(s,a){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNj
attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("title")])]),t("td",[s._v("标题，"),t("strong",[s._v("必选参数")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("主题")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("辅助性文字。也可通过默认 slot 传入")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("是否可关闭")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-text")]),t("td",[s._v("关闭按钮自定义文本")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-icon")]),t("td",[s._v("是否显示图标")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("关闭alert时触发的事件")]),t("td",[s._v("—")])])])])}]}},function(s,a,t){s.exports=t(130)},function(s,a,t){function l(s){t(131),t(133)}var n=t(13)(null,t(135),l,"data-v-4369ac29",null);s.exports=n.exports},function(s,a,t){var l=t(132);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("6f9a73e0",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-badge.demo-box .el-dropdown{vertical-align:middle}",""])},function(s,a,t){var l=t(134);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("98a35740",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,'.share-button[data-v-4369ac29]{width:36px;padding:10px}.mark[data-v-4369ac29]{margin-top:8px;line-height:1;float:right}.clearfix[data-v-4369ac29]:after,.clearfix[data-v-4369ac29]:before{display:table;content:""}.clearfix[data-v-4369ac29]:after{clear:both}.item[data-v-4369ac29]{margin-right:40px}',""])},function(s,a){s.exports={
staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("不同的颜色倾向代表不同的提示")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认显示颜色</span>\n  <span class="wrapper">\n    <el-button type="success">成功按钮</el-button>\n    <el-button type="warning">警告按钮</el-button>\n    <el-button type="danger">危险按钮</el-button>\n    <el-button type="info">信息按钮</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">hover 显示颜色</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">成功按钮</el-button>\n    <el-button :plain="true" type="warning">警告按钮</el-button>\n    <el-button :plain="true" type="danger">危险按钮</el-button>\n    <el-button :plain="true" type="info">信息按钮</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),t("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),t("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),t("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("hover 显示颜色")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{plain:!0,type:"success"}},[s._v("成功按钮")]),t("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("警告按钮")]),t("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("危险按钮")]),t("el-button",{attrs:{plain:!0,type:"info"}},[s._v("信息按钮")])],1)])]),t("p",[s._v("朴素按钮同样设置了不同的"),t("code",[s._v("type")]),s._v("属性对应的样式（可选值同上），默认为"),t("code",[s._v("info")]),s._v("。设置"),t("code",[s._v("plain")]),s._v("属性，它接受一个"),t("code",[s._v("Boolean")]),s._v("。注意，在该情况下，"),t("code",[s._v("type")]),s._v("虽然可以为"),t("code",[s._v("text")]),s._v("，但是是没有意义的，会显示为"),t("code",[s._v("text button")]),s._v("的样式。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[
script:null,style:"\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(a){return l("div",{key:a,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+a)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="~examples/assets/images/hamburger.png" class="image">\n      <div style="padding: 14px;">\n        <span>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n",style:'\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-row",s._l(2,function(a,n){return l("el-col",{key:a,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:t(153)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{stat
}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(a){return t("el-carousel-item",{key:a},[t("h3",[s._v(s._s(a))])])}))]],2),t("p",[s._v("将"),t("code",[s._v("type")]),s._v("属性设置为"),t("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),t("span",[s._v("{{")]),s._v(" item "),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),t("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(
staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("la
staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),t("span",{staticClass:"hljs-att
},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" v-model="selectedOptions3"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n           
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),t("p",[s._v("若需要允许用户选择任意一级选项，则可将"),t("code",[s._v("change-on-select")]),s._v("赋值为"),t("code",[s._v("true")])]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticCla
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),t("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),t("p",[s._v("将"),t("code",[s._v("filterable")]),s._v("赋值为"),t("code",[s._v("true")]),s._v("即可打开搜索功能。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),t("
staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` 为 true 或 false -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("多选框不可用状态。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(a){s.checked1=a},expression:"checked1"}},[s._v("备选项1")]),t("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(a){s.checked2=a},expression:"checked2"}},[s._v("备选项")])]],2),t("p",[s._v("设置"),t("code",[s._v("disabled")]),s._v("属性即可。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),t("
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("Checkbox 按钮组尺寸")]),t("td",[s._v("string")]),t("td",[s._v("large, small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("按钮激活时的填充色和边框色")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#20a0ff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("按钮激活时的文本颜色")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("可被勾选的 checkbox 的最小数量")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("可被勾选的 checkbox 的最大数量")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("事件名称")]),t("th",[s._v("说明")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("当绑定值变化时触发的事件")]),t("td",[s._v("event 事件对象")])])])])}]}},function(s,a,t){s.exports=t(173)},function(s,a,t){function l(s){t(174)}var n=t(13)(t(176),t(177),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(175);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("1bea78a9",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,a){"use strict";a.__esModule=!0,a.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("通过折叠面板收纳内容区域")]),s._m(1),t("p",[s._v("可同时展开多个面板，面板之间不影响")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的<EFBFBD><EFBFBD>
staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color3" show-alpha></el-color-picker>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(a){s.color3=a},expression:"color3"}})],1),t("p",[s._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),t("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidd
},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"yyyy 第 WW 周"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择周"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择月"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择年"')]),s._v(">")]),s._v("\n  "),t("span",{staticClas
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("默认")]),t("el-date-picker",{attrs:{type:"datetimerange",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})],1),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),t("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right"},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})],1)]],2),t("p",[s._v("设置"),t("code",[s._v("type")]),s._v("为"),t("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),t("span",{static
},[s._v(":label-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s.
staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",[s._v("黄金糕")]),t("el-dropdown-item",[s._v("狮子头")]),t("el-dropdown-item",[s._v("螺蛳粉")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),t("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),t("code",[s._v("hide-on-click")]),s._v("属性默认为"),t("code",[s._v("false")]),s._v("可以关闭此功能。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v
},[s._v("el-col")]),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-switch")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"}
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-form")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"活动时间"
},[s._v("\"resetForm('ruleForm2')\"")]),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-form-item")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'年龄不能为空'")]),s._v("));\n        }\n        setTimeout("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),t("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'请输入数字值'")]),s._v("));\n          } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),t("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'必须年满18岁'")]),s._v("));\n            } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),t("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),t("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),t("span",{staticClass:"hljs-string"},[s._v("'请输入密码'")]),s._v("));\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),t("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),t("span",{staticClass:"hljs-string"},[s._v("''"
},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("name")]),t("th",[s._v("说明")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("Form Item 的内容")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("标签文本的内容")])])])])}]}},function(s,a,t){s.exports=t(223)},function(s,a,t){var l=t(13)(t(224),t(226),null,null,null);s.exports=l.exports},function(s,a,t){"use strict";var l=t(225);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,a){"use strict";a.__esModule=!0;var t=a.hasClass=function(s,a){return s.className.match(new RegExp("(\\s|^)"+a+"(\\s|$)"))},l=a.addClass=function(s,a){t(s,a)||(s.className+=" "+a)},n=a.removeClass=function(s,a){if(t(s,a)){var l=new RegExp("(\\s|^)"+a+"(\\s|$)");s.className=s.className.replace(l," ")}};a.toggleClass=function(s,a){t(s,a)?n(s,a):l(s,a)}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h1",[s._v("组件说明文档")])])}]}},function(s,a,t){s.exports=t(228)},function(s,a,t){function l(s){t(229)}var n=t(13)(null,t(231),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(230);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("97585698",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,"ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}",""])},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement;s._self._c||a;return s._m(0)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"guo-ji-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),t("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-comment"},[s._v("// 完整引入 Element")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),t("p",[s._v("或")]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-comment"},[s._v("// 按需引入 Element")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{
},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("允许定义递增递减的步数控制")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(a){s.num3=a},expression:"num3"}})]],2),t("p",[s._v("设置"),t("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),t("code",[s._v("Number")]),s._v("。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-input-number size="large" v-model="num4"></el-input-number>\n  <el-input-number v-model="num5"></el-input-number>\n  <el-input-number size="small" v-model="num6"></el-input-number>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-input-number",{attrs:{size:"large"},mo
},[s._v("el-input")]),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('"input5"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() 
},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"'
style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(a){s.state4=a},expression:"state4"}})],1),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),t("span",{staticClass:"hlj
},[t("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("按钮"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue@2.5/dist/vue.js"')]),s._v(">")]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/index.js"')]),s._v(">")]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-nam
},[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('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-str
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\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  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n"}}},[t("div",{staticClass:"source",slot:"source"},[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("spa
},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),s._m(5),t("p",[s._v("在需要调用时：")]),s._m(6),s._m(7),s._m(8),t("p",[s._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),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:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"jia-zai-wen-an"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载文案")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("其中 "),t("code",[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),t("code",[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),t("code",[s._v("close")]),s._v(" 方法来关闭它：")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),t("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),t("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),t("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("此时调用它们中任意一个的 "),t("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),t("code",[s._v("$loading")]),s._v("，它的调用方式为："),t("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var 
},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("不带 icon"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),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("default-active")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("导航一"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),t("span",{static
var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(a){var t=a.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+t})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this,a=this.$createElement;this.$msgbox({title:"消息",message:a("p",null,[a("span",null,"内容可以是 "),a("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,a,t){"confirm"===s?(a.confirmButtonLoading=!0,a.confirmButtonText="执行中...",setTimeout(function(){t(),setTimeout(function(){a.confirmButtonLoading=!1},300)},3e3)):t()}}).then(function(a){setTimeout(function(){s.$message({type:"info",message:"action: "+a})},200)})}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。")]),s._m(1),t("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),t("p",[s._v("调用"),t("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),t("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),t("code",[s._v("message")]),s._v("和"),t("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),t("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),t("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")
staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),t("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),t("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", [\n            h("),t("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", "),t("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'内容可以是 '")]),s._v("),\n            h("),t("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),t("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n          ])\n        });\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),t("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),t("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),t("code",[s._v("info")]),s._v("。此时正文内容以"),t("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),t("code",[s._v("type")]),s._v("字段的情况下像"),t("code",[s._v("open4")]),s._v("那样直接调用。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("成功"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("警告"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-
staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),t("p",[s._v("单独引入 Notification：")]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Element 为 "),t("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),t("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("此时调用方法为 "),t("code",[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("标题")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("说明文字")]),t("td",[s._v("string/Vue.VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("主题样式，如果不在可选值内将被忽略")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("自定义图标的类名。若设置了 "),t("code",[s._v("type")]),s._v("，则 "),t("code",[s._v("iconClass")]),s._v(" 会被覆盖")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("cus
script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),t("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[t("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),t("p",[s._v("设置索引"),t("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),t("code",[s._v("v-popover")]),s._v("，指向索引ID。"),t("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),t("code",[s._v("hover")]),s._v(", "),t("code",[s._v("click")]),s._v(" 和 "),t("code",[s._v("focus")]),s._v("。第二种用法通过 "),t("code",[s._v("slot")]),s._v(" 指定 reference。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{stat
},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("percentage")])]),t("td",[t("strong",[s._v("百分比（必填）")])]),t("td",[s._v("number")]),t("td",[s._v("0-100")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("进度条类型")]),t("td",[s._v("string")]),t("td",[s._v("line/circle")]),t("td",[s._v("line")])]),t("tr",[t("td",[s._v("stroke-width")]),t("td",[s._v("进度条的宽度，单位 px")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("6")])]),t("tr",[t("td",[s._v("text-inside")]),t("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("进度条当前状态")]),t("td",[s._v("string")]),t("td",[s._v("success/exception")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),t("td",[s._v("number")]),t("td"),t("td",[s._v("126")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("是否显示进度条文字内容")]),t("
},[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  <el-radio-group v-model="radio3">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n  <div style="margin: 15px 0;"></div>\n  <el-radio-group v-model="radio4">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京" :disabled="true"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n  <div style="margin: 15px 0;"></div>\n  <el-radio-group v-model="radio5" :disabled="true">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio3: '上海',\n        radio4: '上海',\n        radio5: '上海'\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-radio-group",{model:{value:s.radio3,callback:function(a){s.radio3=a},expression:"radio3"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京"}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1),t("div",{staticStyle:{margin:"15px 0"}}),t("el-radio-group",{model:{value:s.radio4,callback:function(a){s.radio4=a},expression:"radio4"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京",disabled:!0}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1),t("div",{staticStyle:{margin:"15px 0"}}),t("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(a){s.radio5=a},expression:"radio5"}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京"}}),t("el-radio-button",{attrs:{label:"广州"}}),t("el-radio-button",{attrs:{label:"深圳"}})],1)]],2),t("p",[s._v("只需要把"),t("code",[s._v("el-radio")]),s._v("元素换成"),t("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),t("code",[s._v("size")]),s._v("属性给按钮组，支持"),t("code",[s._v("large")]),s._v("和"),t("code",[s._v("small")]),s._v("两种（如果不设定为默认）。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),t("span",{sta
value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:"",value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var a=this;""!==s?(this.loading=!0,setTimeout(function(){a.loading=!1,a.options4=a.list.filter(function(a){return a.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[s._m(0),t("p",[s._v("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),t("p",[s._v("适用广泛的基础单选")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="请选择">\n    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value,callback:function(a){s.value=a},expression:"value"}},s._l(s.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),t("p",[t("code",[s._v("v-model")]),s._v("的值为当前被选中的"),t("code",[s._v("el-option")]),s._v("的 value 属性值")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs
},[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("cities")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),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("'Shanghai'")]),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("'Nanjing'")]),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("'Chengdu'")]),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("'Shenzhen'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n        }],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("备选项进行分组展示")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="请选择">\n    <el-option-group v-for="group in options3" :key="group.label" :label="group.label">\n      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value7,callback:function(a){s.value7=a},expression:"value7"}},s._l(s.options3,function(a){return t("el-option-group",{key:a.label,attrs:{label:a.label}},s._l(a.options,function(s){return t("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),t("p",[s._v("使用"),t("
"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:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空单选")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","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-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","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-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分组")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticClass:"tip"},[t("p",[s._v("如果 Select 的绑定值为对象类型，请务必指定 "),t("code",[s._v("value-key")]),s._v(" 作为它的唯一性标识。")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("参数")]),t("th",[s._v("说明")]),t("th",[s._v("类型")]),t("th",[s._v("可选值")]),t("th",[s._v("默认值")])])]),t("tbody",[t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("是否多选")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("是否禁用")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("输入框尺寸")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("单选时是否可以清空选项")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("multiple-limit")]),t("td",[s._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("select input 的 name 属性")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("占位符")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("请选择")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("是否可搜索")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[
},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:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 离散值")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有输入框")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-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:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-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("min")]),t("td",[s._v("最小值")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("最大值")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("100")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("是否禁用")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("步长")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("show-input")]),t("td",[s._v("是否显示输入框，仅在非范围选择时有效")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-input-controls")]),t("td",[s._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-stops")]),t("td",[s._v("是否显示间断点")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-tooltip")]),t("td",[s._v("是否显示 tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("format-tooltip")]),t("td",[s._v("格式化 tooltip message")]),t("td",[s._v("Function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("range")]),t("td",[s._v("是否为范围选择")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("vertical")]),t("td",[s._v("是否竖向模式")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("Slider 高度，竖向模式时必填")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("输入时的去抖延迟，毫秒，仅在"),t("code",[s._v("show-input")]),s._v("等于true时有效")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])])])])},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("
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('"value4"')]),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("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),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('"value4"')]),s._v("\n  "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),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("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("value4")]),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(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch 开关")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 扩展的 value 类型")])},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:"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("disabled")]),t("td",[s._v("是否禁用")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("switch 的宽度（像素）")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("58（有文字）/ 46（无文字）")])]),t("tr",[t("td",[s._v("on-icon-class")]),t("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),t("code",[s._v("on-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("off-icon-class")]),t("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略
style:"\n  .el-table .info-row {\n    background: #c9e5f5;\n  }\n\n  .el-table .positive-row {\n    background: #e2f0e4;\n  }\n"}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"日期",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("row-class-name")]),s._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")]),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('"tableData2"')]),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(":row-class-name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n  "),t("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),t("span",{staticClass:"hljs-selector-
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2),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("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('"tableData3"')]),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("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"250"')]),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("fixed")]),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('"150"')]),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('"120"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{
style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{label:"配送信息"}},[t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{label:"地址"}},[t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2),t("p",[s._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")]),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('"tableData3"')]),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('"150"')]),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(" "),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("\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('"120"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),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("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),t("span",{staticC
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("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),t("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("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-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-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("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-06'")]),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-07'")]),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-st
},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),t("span",[s._v("{{")]),s._v(" scope.row.name "),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),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-column")]),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("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-button")]),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("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),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("\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("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),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    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:"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
},[s._v('"amount2"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"数值 2"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"数值 3"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  \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("height")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),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%; margin-top: 20px"')]),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('"id"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ID"')]),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(">")]),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('"amount1"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),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("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('"amount2"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string
},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'second'")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\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-tabs v-model="activeName2" type="card" @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        activeName2: 'first'\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",{attrs:{type:"card"},on:{"tab-click":s.handleClick},model:{value:s.activeName2,callback:function(a){s.activeName2=a},expression:"activeName2"}},[t("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),t("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]
},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._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-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-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:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","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-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","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("slot")]),s._v(" 来实现自定义标签页的内容")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-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:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义增加标签页触发器")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 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("type")]),t("td",[s._v("风格类型")]),t("td",[s._v("string")]),t("td",[s._v("card/border-card")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("标签是否可关闭")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("addable")]),t("td",[s._v("标签是否可增加")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("标签是否同时可增加和关闭")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("active-name(deprecated)")]),t("td",[s._v("选中选项卡的 name")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("第一个选项卡的 name")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("绑定值，选中选项卡的 name")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("第一个选项卡的 name")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 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("tab-click")]),t("td",[s._v("tab 被选中时触发")]),t("td",[s._v("被选中的标签 tab 实例")])]),t("tr",[t("td",[s._v("tab-remove")]),t("td",[s._v("点击 tab 移除按钮后触发")]),t("
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('"endTime"')]),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      minTime: startTime\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("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("startTime")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("endTime")]),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(4),t("p",[s._v("可选择任意的时间范围")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker is-range v-model="value3" placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-time-picker",{attrs:{"is-range":"",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(a){s.value3=a},expression:"value3"}})]],2),t("p",[s._v("添加"),t("code",[s._v("is-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("el-time-picker")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("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("value3")]),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",{staticCl
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",[s._v("Light")])],1)],1),t("p",[s._v("通过设置"),t("code",[s._v("effect")]),s._v("属性来改变主题，默认为"),t("code",[s._v("dark")]),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-tooltip")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top"')]),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("Dark"),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("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(" "),t("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),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")])])])]),s._m(4),t("p",[s._v("展示多行文本或者是设置文本内容的格式")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n  <div slot="content">多行信息<br>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{staticClass:"source",slot:"source"},[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{slot:"content"},[s._v("多行信息"),t("br"),s._v("第二行信息")]),t("el-button",[s._v("Top center")])],1)],1),t("p",[s._v("用具名 slot 分发"),t("code",[s._v("content")]),s._v("，替代"),t("code",[s._v("tooltip")]),s._v("中的"),t("code",[s._v("content")]),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-tooltip")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("多行信息"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),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-button")]),s._v(">")]),s._v("Top center"),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(
},[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; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data3: generateData3(),\n        value4: []\n      };\n    }\n  };\n",style:null}}},[t("div",{staticClass:"source",slot:"source"},[[t("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(a){s.value4=a},expression:"value4"}})]],2),t("p",[s._v("本例中的数据源没有 "),t("code",[s._v("key")]),s._v(" 和 "),t("code",[s._v("label")]),s._v(" 字段，在功能上与它们相同的字段名为 "),t("code",[s._v("value")]),s._v(" 和 "),t("code",[s._v("desc")]),s._v("。因此可以使用"),t("code",[s._v("props")]),s._v(" 属性为 "),t("code",[s._v("key")]),s._v(" 和 "),t("code",[s._v("label")]),s._v(" 设置别名。")]),t("div",{staticClass:"highlight",slot:"highlight"},[t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),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(":props")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"data3"')]),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("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(" generateData3 = "),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("value")]),s._v(": i,\n            "),t("span",{staticClass:"hljs-attr"},[s._v("desc")]),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("data3")]),s._v(": genera
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._m(7)],1)},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 内置过渡动画")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),t("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[s._v("transition 组件文档")]),s._v(" 。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade 淡入淡出")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom 缩放")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse 展开折叠")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("使用 "),t("code",[s._v("el-collapse-transition")]),s._v(" 组件实现折叠展开效果。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需引入")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",[t("code",{staticClass:"hljs language-js"},[t("span",{staticClass:"hljs-comment"},[s._v("// fade/zoom 等")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),t("span",{staticClass:"hljs-comment"},[s._v("// collapse 展开折叠")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CollapseTransition "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/transitions/collapse-transition'")]),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\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}]}},function(s,a,t){s.exports=t(376)},function(s,a,t){function l(s){t(377)}var n=t(13)(t(379),t(380),l,null,null);s.exports=n.exports},function(s,a,t){var l=t(378);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);t(11)("3b36b9b8",l,!0)},function(s,a,t){a=s.exports=t(6)(),a.push([s.id,".demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}",""])},function(s,a){"use strict";a.__esModule=!0;var t=[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],l=[{id:1,label:"一级 1",children:[{id:4,l
staticClass:"hljs-literal"},[s._v("true")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox="" default-expand-all="" node-key="id" ref="tree" highlight-current :props="defaultProps">\n</el-tree>\n\n<div class="buttons">\n  <el-button @click="getCheckedNodes">通过 node 获取</el-button>\n  <el-button @click="getCheckedKeys">通过 key 获取</el-button>\n  <el-button @click="setCheckedNodes">通过 node 设置</el-button>\n  <el-button @click="setCheckedKeys">通过 key 设置</el-button>\n  <el-button @click="resetChecked">清空</el-button>\n</div>\n\n\n',script:"\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[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
},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),t("span",{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(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},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(" 默认展开和默认选<EFBFBD><EFBFBD>
staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\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("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),t("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),t("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),t("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),t("span",{staticClass:"hljs-string"},[s._v("'上传头像图片只能是 JPG 格式!'")]),s._v(");\n        }\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),t("span",{staticClass:"hljs-string"},[s._v("'上传头像图片大小不能超过 2MB!'")]),s._v(");\n        }\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\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:'<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog v-model="dialogVisible" size="tiny">\n  <img width="100%" :src="dialogImageUrl" alt>\n</el-dialog>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[t("div",{staticClass:"source",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"
attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("文件类型")]),s._v("（thumbnail-mode 模式下此参数无效）")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-preview")]),t("td",[s._v("可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-remove")]),t("td",[s._v("可选参数, 文件列表移除文件时的钩子")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-success")]),t("td",[s._v("可选参数, 文件上传成功时的钩子")]),t("td",[s._v("function(response, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-error")]),t("td",[s._v("可选参数, 文件上传失败时的钩子")]),t("td",[s._v("function(err, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-progress")]),t("td",[s._v("可选参数, 文件上传时的钩子")]),t("td",[s._v("function(event, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-change")]),t("td",[s._v("可选参数, 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-upload")]),t("td",[s._v("可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("list-type")]),t("td",[s._v("文件列表的类型")]),t("td",[s._v("string")]),t("td",[s._v("text/picture/picture-card")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("auto-upload")]),t("td",[s._v("是否在选取文件后立即进行上传")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("file-list")]),t("td",[s._v("上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[]")])]),t("tr",[t("td",[s._v("http-request")]),t("td",[s._v("覆盖默认的上传行为，可以自定义上传的实现")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("是否禁用")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" 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("clearFiles")]),t("td",[s._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("abort")]),t("td",[s._v("取消上传请求")]),t("td",[s._v("（ file: fileList 中的 file 对象 ）")])])])])}]}}]));