Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
lqb
/
vue-element-plus-admin-doc
-ын хуулбар https://gitee.com/kailong110120130/vue-element-plus-admin-doc.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Салаа: gh-pages
Салаанууд Тагууд
vue-element-plu...
/
components
/
search.html

search.html 85 KB
Байнгын холболт Түүх Анхны өгөгдөл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>Search 查询组件 | vue-element-plus-admin</title>
    7. 

  7.     <meta name="description" content="一套基于vue3、element-plus、typesScript、vite的后台集成方案">
    8. 

  8.     <link rel="stylesheet" href="/assets/style.e8023618.css">
    9. 

  9.     <link rel="modulepreload" href="/assets/Home.8d63bef0.js">
    10. 

  10.     <link rel="modulepreload" href="/assets/app.51e46c58.js">
    11. 

  11.     <link rel="modulepreload" href="/assets/components_search.md.bb143d26.lean.js">
    12. 

  12.     <link rel="modulepreload" href="/assets/app.51e46c58.js">
    13. 

  13.     <meta name="author" content="Archer">
    14. 

  14.     <meta name="keywords" content="vue-element-plus-admin, vitejs, vite, element-plus, vue">
    15. 

  15.     <link rel="icon" type="image/svg+xml" href="/logo.svg">
    16. 

  16.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    17. 

  17.     <meta name="keywords" content="vue-element-plus-admin-doc">
    18. 

  18.     <link rel="icon" href="/favicon.ico">
    19. 

  19.     <meta name="twitter:title" content="Search 查询组件 | vue-element-plus-admin">
    20. 

  20.     <meta property="og:title" content="Search 查询组件 | vue-element-plus-admin">
    21. 

  21.   </head>
    22. 

  22.   <body>
    23. 

  23.     <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-47437b3e><div class="sidebar-button" data-v-47437b3e><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="vue-element-plus-admin, back to home" data-v-47437b3e data-v-3e3fd8b1><img class="logo" src="/logo.png" alt="Logo" data-v-3e3fd8b1> vue-element-plus-admin</a><div class="flex-grow" data-v-47437b3e></div><div class="nav" data-v-47437b3e><nav class="nav-links" data-v-47437b3e data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>指南</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/guide/introduction" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>指南</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/dep/i18n" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>深入</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/guide/version" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>v2版本重大更新</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>组件</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/introduction" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>介绍</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/icon" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>全局组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/form" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>功能组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/image-viewer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>函数式组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/hooks/useWatermark" data-v-c272f228>常用Hooks <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/guide/fqa" data-v-c272f228>常见问题 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>相关链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://element-plus-admin.cn/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 站点预览</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin-doc" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 文档源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 更新日志</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://kailong110120130.gitee.io/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 站点预览</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin-doc" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 文档源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 更新日志</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>捐赠</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/donate/donate" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>捐赠</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
    24. 

  24.       <NavLink :item="repo" />
    25. 

  25.     </div> --></nav></div><div class="nav-icons" data-v-47437b3e><div class="item" data-v-47437b3e><button class="nav-btn" aria-label="Toggle Theme" data-v-47437b3e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-47437b3e><a class="nav-btn" href="https://github.com/kailong321200875/vue-element-plus-admin" target="_blank" aria-label="View GitHub Repo" data-v-47437b3e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-47437b3e><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-4668b452><nav class="nav-links nav" data-v-4668b452 data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>指南</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/guide/introduction" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>指南</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/dep/i18n" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>深入</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/guide/version" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>v2版本重大更新</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>组件</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/introduction" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>介绍</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/icon" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>全局组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/form" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>功能组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/components/image-viewer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>函数式组件</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/hooks/useWatermark" data-v-c272f228>常用Hooks <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/guide/fqa" data-v-c272f228>常见问题 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>相关链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://element-plus-admin.cn/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 站点预览</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin-doc" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 文档源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://github.com/kailong321200875/vue-element-plus-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Github 更新日志</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://kailong110120130.gitee.io/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 站点预览</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin-doc" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 文档源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/kailong110120130/vue-element-plus-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>Gitee 更新日志</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>捐赠</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/donate/donate" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>捐赠</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
    26. 

  26.       <NavLink :item="repo" />
    27. 

  27.     </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-4668b452><!--[--><li class="sidebar-link"><p class="sidebar-link-item">组件</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/introduction">前言</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">全局组件</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon">Icon 图标组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/permission">Permission 权限组件（2.1.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button">BaseButton 按钮组件（2.5.1+）</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">功能组件</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form">Form 表单组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table">Table 表格组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editor">Editor 富文本组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/search">Search 查询组件</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#用法">用法</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#基础用法">基础用法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#usesearch">useSearch</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#search-属性">Search 属性</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#search-事件">Search 事件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#search-方法">Search 方法</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/descriptions">Descriptions 描述组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dialog">Dialog 弹窗组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/echart">Echart 图表组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/count-to">CountTo 数字动画组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/qrcode">Qrcode 二维码组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/highlight">Highlight 高亮组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/infotip">Infotip 信息提示组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/error">Error 缺省组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/content-detail-wrap">ContentDetailWrap 详情包裹组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-password">InputPassword 密码输入框组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/footer">Footer 页脚组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/json-editor">JsonEditor JSON编辑器组件（2.2.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon-picker">图标选择器组件（2.3.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/waterfall">瀑布流组件（2.4.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/video-player">视频播放器组件（2.5.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatars">头像列表组件（2.7.0+）</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/i-agree">我同意组件（2.7.0+）</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">函数式组件</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-viewer">ImageViewer 图片预览组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/video-viewer">VideoViewer  图片预览组件（2.5.0+）</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7abc59e6><div class="container" data-v-7abc59e6><!--[--><!--]--><div class="content" data-v-7abc59e6><div data-v-7abc59e6><h1 id="search-查询组件"><a class="header-anchor" href="#search-查询组件" aria-hidden="true">#</a> Search 查询组件</h1><p>基于 <code>Form</code> 组件封装，支持收缩展开。</p><p>Search 组件位于 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Search" target="_blank" rel="noopener noreferrer">src/components/Search</a> 内</p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>推荐使用 <code>tsx</code> 来使用 <code>Search</code> 组件</p></div><h2 id="用法"><a class="header-anchor" href="#用法" aria-hidden="true">#</a> 用法</h2><h3 id="基础用法"><a class="header-anchor" href="#基础用法" aria-hidden="true">#</a> 基础用法</h3><p>更复杂例子，请<a href="https://element-plus-admin.cn/#/components/search" target="_blank" rel="noopener noreferrer">在线预览</a></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    28. 

  28. <span class="token keyword">import</span> <span class="token punctuation">{</span> Search <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Search&#39;</span>
    29. 

  29. <span class="token keyword">import</span> <span class="token punctuation">{</span> FormSchema <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Form&#39;</span>
    30. 

  30. <span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
    31. 

  31. 

  32. <span class="token keyword">const</span> schema <span class="token operator">=</span> reactive<span class="token operator">&lt;</span>FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    33. 

  33.   <span class="token punctuation">{</span>
    34. 

  34.     field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
    35. 

  35.     label<span class="token operator">:</span> <span class="token string">&#39;input&#39;</span><span class="token punctuation">,</span>
    36. 

  36.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    37. 

  37.   <span class="token punctuation">}</span>
    38. 

  38. <span class="token punctuation">]</span><span class="token punctuation">)</span>
    39. 

  39. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    40. 

  40. 

  41. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    42. 

  42.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Search</span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    43. 

  43. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    44. 

  44. 

  45. </code></pre></div><h3 id="usesearch"><a class="header-anchor" href="#usesearch" aria-hidden="true">#</a> useSearch</h3><p>对于复杂的场景，可以配合 <code>useSearch</code> 来使用。</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    46. 

  46. <span class="token keyword">import</span> <span class="token punctuation">{</span> ContentWrap <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/ContentWrap&#39;</span>
    47. 

  47. <span class="token keyword">import</span> <span class="token punctuation">{</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/hooks/web/useI18n&#39;</span>
    48. 

  48. <span class="token keyword">import</span> <span class="token punctuation">{</span> Search <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Search&#39;</span>
    49. 

  49. <span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> unref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
    50. 

  50. <span class="token keyword">import</span> <span class="token punctuation">{</span> ElButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;element-plus&#39;</span>
    51. 

  51. <span class="token keyword">import</span> <span class="token punctuation">{</span> getDictOneApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/api/common&#39;</span>
    52. 

  52. <span class="token keyword">import</span> <span class="token punctuation">{</span> FormSchema <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Form&#39;</span>
    53. 

  53. <span class="token keyword">import</span> <span class="token punctuation">{</span> useSearch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/hooks/web/useSearch&#39;</span>
    54. 

  54. 

  55. <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    56. 

  56. 

  57. <span class="token keyword">const</span> <span class="token punctuation">{</span> searchRegister<span class="token punctuation">,</span> searchMethods <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    58. 

  58. <span class="token keyword">const</span> <span class="token punctuation">{</span> setSchema<span class="token punctuation">,</span> setProps<span class="token punctuation">,</span> setValues <span class="token punctuation">}</span> <span class="token operator">=</span> searchMethods
    59. 

  59. 

  60. <span class="token keyword">const</span> schema <span class="token operator">=</span> reactive<span class="token operator">&lt;</span>FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    61. 

  61.   <span class="token punctuation">{</span>
    62. 

  62.     field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
    63. 

  63.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    64. 

  64.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    65. 

  65.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    66. 

  66.   <span class="token punctuation">{</span>
    67. 

  67.     field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>
    68. 

  68.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.select&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    69. 

  69.     component<span class="token operator">:</span> <span class="token string">&#39;Select&#39;</span><span class="token punctuation">,</span>
    70. 

  70.     componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>
    71. 

  71.       options<span class="token operator">:</span> <span class="token punctuation">[</span>
    72. 

  72.         <span class="token punctuation">{</span>
    73. 

  73.           label<span class="token operator">:</span> <span class="token string">&#39;option1&#39;</span><span class="token punctuation">,</span>
    74. 

  74.           value<span class="token operator">:</span> <span class="token string">&#39;1&#39;</span>
    75. 

  75.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    76. 

  76.         <span class="token punctuation">{</span>
    77. 

  77.           label<span class="token operator">:</span> <span class="token string">&#39;option2&#39;</span><span class="token punctuation">,</span>
    78. 

  78.           value<span class="token operator">:</span> <span class="token string">&#39;2&#39;</span>
    79. 

  79.         <span class="token punctuation">}</span>
    80. 

  80.       <span class="token punctuation">]</span><span class="token punctuation">,</span>
    81. 

  81.       on<span class="token operator">:</span> <span class="token punctuation">{</span>
    82. 

  82.         <span class="token function-variable function">change</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    83. 

  83.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    84. 

  84.         <span class="token punctuation">}</span>
    85. 

  85.       <span class="token punctuation">}</span>
    86. 

  86.     <span class="token punctuation">}</span>
    87. 

  87.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    88. 

  88.   <span class="token punctuation">{</span>
    89. 

  89.     field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>
    90. 

  90.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.radio&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    91. 

  91.     component<span class="token operator">:</span> <span class="token string">&#39;RadioGroup&#39;</span><span class="token punctuation">,</span>
    92. 

  92.     componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>
    93. 

  93.       options<span class="token operator">:</span> <span class="token punctuation">[</span>
    94. 

  94.         <span class="token punctuation">{</span>
    95. 

  95.           label<span class="token operator">:</span> <span class="token string">&#39;option-1&#39;</span><span class="token punctuation">,</span>
    96. 

  96.           value<span class="token operator">:</span> <span class="token string">&#39;1&#39;</span>
    97. 

  97.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    98. 

  98.         <span class="token punctuation">{</span>
    99. 

  99.           label<span class="token operator">:</span> <span class="token string">&#39;option-2&#39;</span><span class="token punctuation">,</span>
    100. 

  100.           value<span class="token operator">:</span> <span class="token string">&#39;2&#39;</span>
    101. 

  101.         <span class="token punctuation">}</span>
    102. 

  102.       <span class="token punctuation">]</span>
    103. 

  103.     <span class="token punctuation">}</span>
    104. 

  104.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    105. 

  105.   <span class="token punctuation">{</span>
    106. 

  106.     field<span class="token operator">:</span> <span class="token string">&#39;field5&#39;</span><span class="token punctuation">,</span>
    107. 

  107.     component<span class="token operator">:</span> <span class="token string">&#39;DatePicker&#39;</span><span class="token punctuation">,</span>
    108. 

  108.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.datePicker&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    109. 

  109.     componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>
    110. 

  110.       type<span class="token operator">:</span> <span class="token string">&#39;date&#39;</span>
    111. 

  111.     <span class="token punctuation">}</span>
    112. 

  112.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    113. 

  113.   <span class="token punctuation">{</span>
    114. 

  114.     field<span class="token operator">:</span> <span class="token string">&#39;field6&#39;</span><span class="token punctuation">,</span>
    115. 

  115.     component<span class="token operator">:</span> <span class="token string">&#39;TimeSelect&#39;</span><span class="token punctuation">,</span>
    116. 

  116.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.timeSelect&#39;</span><span class="token punctuation">)</span>
    117. 

  117.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    118. 

  118.   <span class="token punctuation">{</span>
    119. 

  119.     field<span class="token operator">:</span> <span class="token string">&#39;field8&#39;</span><span class="token punctuation">,</span>
    120. 

  120.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    121. 

  121.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    122. 

  122.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    123. 

  123.   <span class="token punctuation">{</span>
    124. 

  124.     field<span class="token operator">:</span> <span class="token string">&#39;field9&#39;</span><span class="token punctuation">,</span>
    125. 

  125.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    126. 

  126.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    127. 

  127.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    128. 

  128.   <span class="token punctuation">{</span>
    129. 

  129.     field<span class="token operator">:</span> <span class="token string">&#39;field10&#39;</span><span class="token punctuation">,</span>
    130. 

  130.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    131. 

  131.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    132. 

  132.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    133. 

  133.   <span class="token punctuation">{</span>
    134. 

  134.     field<span class="token operator">:</span> <span class="token string">&#39;field11&#39;</span><span class="token punctuation">,</span>
    135. 

  135.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    136. 

  136.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    137. 

  137.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    138. 

  138.   <span class="token punctuation">{</span>
    139. 

  139.     field<span class="token operator">:</span> <span class="token string">&#39;field12&#39;</span><span class="token punctuation">,</span>
    140. 

  140.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    141. 

  141.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    142. 

  142.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    143. 

  143.   <span class="token punctuation">{</span>
    144. 

  144.     field<span class="token operator">:</span> <span class="token string">&#39;field13&#39;</span><span class="token punctuation">,</span>
    145. 

  145.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    146. 

  146.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    147. 

  147.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    148. 

  148.   <span class="token punctuation">{</span>
    149. 

  149.     field<span class="token operator">:</span> <span class="token string">&#39;field14&#39;</span><span class="token punctuation">,</span>
    150. 

  150.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    151. 

  151.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    152. 

  152.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    153. 

  153.   <span class="token punctuation">{</span>
    154. 

  154.     field<span class="token operator">:</span> <span class="token string">&#39;field15&#39;</span><span class="token punctuation">,</span>
    155. 

  155.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    156. 

  156.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    157. 

  157.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    158. 

  158.   <span class="token punctuation">{</span>
    159. 

  159.     field<span class="token operator">:</span> <span class="token string">&#39;field16&#39;</span><span class="token punctuation">,</span>
    160. 

  160.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    161. 

  161.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    162. 

  162.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    163. 

  163.   <span class="token punctuation">{</span>
    164. 

  164.     field<span class="token operator">:</span> <span class="token string">&#39;field17&#39;</span><span class="token punctuation">,</span>
    165. 

  165.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    166. 

  166.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    167. 

  167.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    168. 

  168.   <span class="token punctuation">{</span>
    169. 

  169.     field<span class="token operator">:</span> <span class="token string">&#39;field18&#39;</span><span class="token punctuation">,</span>
    170. 

  170.     label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;formDemo.input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    171. 

  171.     component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>
    172. 

  172.   <span class="token punctuation">}</span>
    173. 

  173. <span class="token punctuation">]</span><span class="token punctuation">)</span>
    174. 

  174. 

  175. <span class="token keyword">const</span> isGrid <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
    176. 

  176. 

  177. <span class="token keyword">const</span> <span class="token function-variable function">changeGrid</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">grid<span class="token operator">:</span> boolean</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    178. 

  178.   <span class="token function">setProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    179. 

  179.     isCol<span class="token operator">:</span> grid
    180. 

  180.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    181. 

  181.   <span class="token comment">// isGrid.value = grid</span>
    182. 

  182. <span class="token punctuation">}</span>
    183. 

  183. 

  184. <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;inline&#39;</span><span class="token punctuation">)</span>
    185. 

  185. 

  186. <span class="token keyword">const</span> <span class="token function-variable function">changeLayout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    187. 

  187.   layout<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>layout<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;inline&#39;</span> <span class="token operator">?</span> <span class="token string">&#39;bottom&#39;</span> <span class="token operator">:</span> <span class="token string">&#39;inline&#39;</span>
    188. 

  188. <span class="token punctuation">}</span>
    189. 

  189. 

  190. <span class="token keyword">const</span> buttonPosition <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;left&#39;</span><span class="token punctuation">)</span>
    191. 

  191. 

  192. <span class="token keyword">const</span> <span class="token function-variable function">changePosition</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">position<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    193. 

  193.   layout<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&#39;bottom&#39;</span>
    194. 

  194.   buttonPosition<span class="token punctuation">.</span>value <span class="token operator">=</span> position
    195. 

  195. <span class="token punctuation">}</span>
    196. 

  196. 

  197. <span class="token keyword">const</span> <span class="token function-variable function">getDictOne</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    198. 

  198.   <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDictOneApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    199. 

  199.   <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    200. 

  200.     <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    201. 

  201.       <span class="token punctuation">{</span>
    202. 

  202.         field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>
    203. 

  203.         path<span class="token operator">:</span> <span class="token string">&#39;componentProps.options&#39;</span><span class="token punctuation">,</span>
    204. 

  204.         value<span class="token operator">:</span> res<span class="token punctuation">.</span>data
    205. 

  205.       <span class="token punctuation">}</span>
    206. 

  206.     <span class="token punctuation">]</span><span class="token punctuation">)</span>
    207. 

  207.   <span class="token punctuation">}</span>
    208. 

  208. <span class="token punctuation">}</span>
    209. 

  209. 

  210. <span class="token keyword">const</span> <span class="token function-variable function">handleSearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    211. 

  211.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    212. 

  212. <span class="token punctuation">}</span>
    213. 

  213. 

  214. <span class="token keyword">const</span> <span class="token function-variable function">delRadio</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    215. 

  215.   <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    216. 

  216.     <span class="token punctuation">{</span>
    217. 

  217.       field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>
    218. 

  218.       path<span class="token operator">:</span> <span class="token string">&#39;remove&#39;</span><span class="token punctuation">,</span>
    219. 

  219.       value<span class="token operator">:</span> <span class="token boolean">true</span>
    220. 

  220.     <span class="token punctuation">}</span>
    221. 

  221.   <span class="token punctuation">]</span><span class="token punctuation">)</span>
    222. 

  222. <span class="token punctuation">}</span>
    223. 

  223. 

  224. <span class="token keyword">const</span> <span class="token function-variable function">restoreRadio</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    225. 

  225.   <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    226. 

  226.     <span class="token punctuation">{</span>
    227. 

  227.       field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>
    228. 

  228.       path<span class="token operator">:</span> <span class="token string">&#39;remove&#39;</span><span class="token punctuation">,</span>
    229. 

  229.       value<span class="token operator">:</span> <span class="token boolean">false</span>
    230. 

  230.     <span class="token punctuation">}</span>
    231. 

  231.   <span class="token punctuation">]</span><span class="token punctuation">)</span>
    232. 

  232. <span class="token punctuation">}</span>
    233. 

  233. 

  234. <span class="token keyword">const</span> <span class="token function-variable function">setValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    235. 

  235.   <span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    236. 

  236.     field1<span class="token operator">:</span> <span class="token string">&#39;Joy&#39;</span>
    237. 

  237.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    238. 

  238. <span class="token punctuation">}</span>
    239. 

  239. 

  240. <span class="token keyword">const</span> searchLoading <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
    241. 

  241. <span class="token keyword">const</span> <span class="token function-variable function">changeSearchLoading</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    242. 

  242.   searchLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
    243. 

  243.   <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    244. 

  244.     searchLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span>
    245. 

  245.   <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
    246. 

  246. <span class="token punctuation">}</span>
    247. 

  247. 

  248. <span class="token keyword">const</span> resetLoading <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
    249. 

  249. <span class="token keyword">const</span> <span class="token function-variable function">changeResetLoading</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    250. 

  250.   resetLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
    251. 

  251.   <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    252. 

  252.     resetLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span>
    253. 

  253.   <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
    254. 

  254. <span class="token punctuation">}</span>
    255. 

  255. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    256. 

  256. 

  257. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    258. 

  258.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ContentWrap</span>
    259. 

  259.     <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>`${t(<span class="token punctuation">&#39;</span>searchDemo.search<span class="token punctuation">&#39;</span>)} ${t(<span class="token punctuation">&#39;</span>searchDemo.operate<span class="token punctuation">&#39;</span>)}`<span class="token punctuation">&quot;</span></span>
    260. 

  260.     <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">&quot;</span></span></span>
    261. 

  261.   <span class="token punctuation">&gt;</span></span>
    262. 

  262.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeGrid(true)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ t(&#39;searchDemo.grid&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    263. 

  263.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeGrid(false)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    264. 

  264.       {{ t(&#39;searchDemo.restore&#39;) }} {{ t(&#39;searchDemo.grid&#39;) }}
    265. 

  265.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    266. 

  266. 

  267.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLayout<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    268. 

  268.       {{ t(&#39;searchDemo.button&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}
    269. 

  269.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    270. 

  270. 

  271.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changePosition(<span class="token punctuation">&#39;</span>left<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    272. 

  272.       {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.left&#39;) }}
    273. 

  273.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    274. 

  274.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changePosition(<span class="token punctuation">&#39;</span>center<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    275. 

  275.       {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.center&#39;) }}
    276. 

  276.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    277. 

  277.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changePosition(<span class="token punctuation">&#39;</span>right<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    278. 

  278.       {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.right&#39;) }}
    279. 

  279.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    280. 

  280.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getDictOne<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    281. 

  281.       {{ t(&#39;formDemo.select&#39;) }} {{ t(&#39;searchDemo.dynamicOptions&#39;) }}
    282. 

  282.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    283. 

  283.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>delRadio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ t(&#39;searchDemo.deleteRadio&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    284. 

  284.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>restoreRadio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ t(&#39;searchDemo.restoreRadio&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    285. 

  285.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setValue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ t(&#39;formDemo.setValue&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    286. 

  286. 

  287.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeSearchLoading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    288. 

  288.       {{ t(&#39;searchDemo.search&#39;) }} {{ t(&#39;searchDemo.loading&#39;) }}
    289. 

  289.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    290. 

  290.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeResetLoading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    291. 

  291.       {{ t(&#39;searchDemo.reset&#39;) }} {{ t(&#39;searchDemo.loading&#39;) }}
    292. 

  292.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>
    293. 

  293.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ContentWrap</span><span class="token punctuation">&gt;</span></span>
    294. 

  294. 

  295.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ContentWrap</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t(<span class="token punctuation">&#39;</span>searchDemo.search<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:message</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t(<span class="token punctuation">&#39;</span>searchDemo.searchDes<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    296. 

  296.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Search</span>
    297. 

  297.       <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schema<span class="token punctuation">&quot;</span></span>
    298. 

  298.       <span class="token attr-name">:is-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isGrid<span class="token punctuation">&quot;</span></span>
    299. 

  299.       <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layout<span class="token punctuation">&quot;</span></span>
    300. 

  300.       <span class="token attr-name">:button-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonPosition<span class="token punctuation">&quot;</span></span>
    301. 

  301.       <span class="token attr-name">:search-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchLoading<span class="token punctuation">&quot;</span></span>
    302. 

  302.       <span class="token attr-name">:reset-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>resetLoading<span class="token punctuation">&quot;</span></span>
    303. 

  303.       <span class="token attr-name">show-expand</span>
    304. 

  304.       <span class="token attr-name">expand-field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>field6<span class="token punctuation">&quot;</span></span>
    305. 

  305.       <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSearch<span class="token punctuation">&quot;</span></span>
    306. 

  306.       <span class="token attr-name">@reset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSearch<span class="token punctuation">&quot;</span></span>
    307. 

  307.       <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchRegister<span class="token punctuation">&quot;</span></span>
    308. 

  308.     <span class="token punctuation">/&gt;</span></span>
    309. 

  309.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ContentWrap</span><span class="token punctuation">&gt;</span></span>
    310. 

  310. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    311. 

  311. 

  312. </code></pre></div><h4 id="参数介绍"><a class="header-anchor" href="#参数介绍" aria-hidden="true">#</a> 参数介绍</h4><div class="language-ts"><pre><code><span class="token keyword">const</span> <span class="token punctuation">{</span> searchRegister<span class="token punctuation">,</span> searchMethods <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    313. 

  313. </code></pre></div><p><strong>register</strong></p><p><code>searchRegister</code> 用于注册 <code>useSearch</code>，如果需要使用 <code>useSearch</code> 提供的 <code>api</code>，必须将 <code>searchRegister</code> 传入组件的 <code>onRegister</code></p><p><strong>formMethods</strong></p><table><thead><tr><th>方法名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>setValues</td><td>用于设置表单值</td><td>(data: Recordable) =&gt; void</td></tr><tr><td>setProps</td><td>用于设置表单属性</td><td>(props: Recordable) =&gt; void</td></tr><tr><td>delSchema</td><td>用于删除表单结构</td><td>(field: string) =&gt; void</td></tr><tr><td>addSchema</td><td>用于新增表单结构</td><td>(formSchema: FormSchema, index?: number) =&gt; void</td></tr><tr><td>setSchema</td><td>用于编辑表单结构</td><td>(schemaProps: FormSetPropsType[]) =&gt; void</td></tr><tr><td>getFormData</td><td>用于获取表单数据</td><td><code>&lt;T = Recordable&gt;() =&gt; Promise&lt;T&gt;</code></td></tr></tbody></table><h2 id="search-属性"><a class="header-anchor" href="#search-属性" aria-hidden="true">#</a> Search 属性</h2><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>schema</td><td>生成 Search 的布局结构数组，<a href="#Schema">详见</a></td><td><code>FormSchema</code></td><td>-</td><td>[]</td></tr><tr><td>isCol</td><td>是否需要栅格布局</td><td><code>boolean</code></td><td>-</td><td>true</td></tr><tr><td>labelWidth</td><td>表单 label 宽度</td><td><code>string</code>/<code>number</code></td><td>-</td><td>auto</td></tr><tr><td>layout</td><td>操作按钮风格位置</td><td><code>string</code></td><td>inline/bottom</td><td>inline</td></tr><tr><td>buttonPosition</td><td>底部操作按钮的对齐方式</td><td><code>string</code></td><td>left/center/right</td><td>center</td></tr><tr><td>showSearch</td><td>是否显示查询按钮</td><td><code>boolean</code></td><td>-</td><td>true</td></tr><tr><td>showReset</td><td>是否显示重置按钮</td><td><code>boolean</code></td><td>-</td><td>true</td></tr><tr><td>expand</td><td>是否显示伸缩按钮</td><td><code>boolean</code></td><td>-</td><td>false</td></tr><tr><td>expandField</td><td>伸缩的界限字段</td><td><code>string</code></td><td>-</td><td>-</td></tr><tr><td>inline</td><td>是否是行内</td><td><code>boolean</code></td><td>-</td><td>true</td></tr><tr><td>removeNoValueItem</td><td>是否自动去除空值</td><td><code>boolean</code></td><td>-</td><td>true</td></tr><tr><td>model</td><td>初始化数据</td><td><code>object</code></td><td>-</td><td>-</td></tr><tr><td>searchLoading</td><td>查询按钮加载状态</td><td><code>boolean</code></td><td>-</td><td>false</td></tr><tr><td>resetLoading</td><td>重置按钮加载状态</td><td><code>boolean</code></td><td>-</td><td>false</td></tr></tbody></table><h2 id="search-事件"><a class="header-anchor" href="#search-事件" aria-hidden="true">#</a> Search 事件</h2><table><thead><tr><th>方法名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>search</td><td>查询后的回调</td><td>data: Recordable</td></tr><tr><td>reset</td><td>重置后的回调</td><td>data: Recordable</td></tr></tbody></table><h2 id="search-方法"><a class="header-anchor" href="#search-方法" aria-hidden="true">#</a> Search 方法</h2><table><thead><tr><th>方法名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>setValues</td><td>用于设置表单值</td><td>(data: Recordable) =&gt; void</td></tr><tr><td>setProps</td><td>用于设置表单属性</td><td>(props: Recordable) =&gt; void</td></tr><tr><td>delSchema</td><td>用于删除表单结构</td><td>(field: string) =&gt; void</td></tr><tr><td>addSchema</td><td>用于新增表单结构</td><td>(formSchema: FormSchema, index?: number) =&gt; void</td></tr><tr><td>setSchema</td><td>用于编辑表单结构</td><td>(schemaProps: FormSetPropsType[]) =&gt; void</td></tr><tr><td>getElFormExpose</td><td>用于获取 Form 组件的实例</td><td><code>() =&gt; Promise&lt;typeof ElForm&gt;</code></td></tr></tbody></table></div></div><footer class="page-footer" data-v-7abc59e6 data-v-22e60b1a><div class="edit" data-v-22e60b1a><div class="edit-link" data-v-22e60b1a data-v-045573c2><a class="link" href="https://github.com/kailong321200875/vue-element-plus-admin-doc/edit/master/components/search.md" target="_blank" rel="noopener noreferrer" data-v-045573c2>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-045573c2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-22e60b1a><!----></div></footer><div class="next-and-prev-link" data-v-7abc59e6 data-v-0facf926><div class="container" data-v-0facf926><div class="prev" data-v-0facf926><a class="link" href="/components/editor" data-v-0facf926><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-0facf926><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-0facf926>Editor 富文本组件</span></a></div><div class="next" data-v-0facf926><a class="link" href="/components/descriptions" data-v-0facf926><span class="text" data-v-0facf926>Descriptions 描述组件</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0facf926><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    314. 

  314.     <script>__VP_HASH_MAP__ = JSON.parse("{\"readme.md\":\"6eae9e86\",\"index.md\":\"c755561e\",\"components_avatars.md\":\"2c3d0baf\",\"components_button.md\":\"0430e5c7\",\"components_content-detail-wrap.md\":\"2d7c311e\",\"components_count-to.md\":\"af12b562\",\"components_descriptions.md\":\"8008497d\",\"components_dialog.md\":\"189b3e63\",\"components_echart.md\":\"48a3cc09\",\"components_editor.md\":\"d52df9ff\",\"components_error.md\":\"d3318a72\",\"components_footer.md\":\"ba498476\",\"components_form.md\":\"1db28135\",\"components_highlight.md\":\"00a3b626\",\"components_i-agree.md\":\"0cb8ef29\",\"components_icon-picker.md\":\"d6c2b409\",\"components_icon.md\":\"6b2d9abc\",\"components_image-viewer.md\":\"aca71661\",\"components_infotip.md\":\"3481943a\",\"components_input-password.md\":\"7a7c7757\",\"components_introduction.md\":\"c650023e\",\"components_json-editor.md\":\"09f19a8e\",\"components_permission.md\":\"5db4fab9\",\"components_qrcode.md\":\"a46b6363\",\"components_search.md\":\"bb143d26\",\"components_sticky.md\":\"efee741b\",\"components_table.md\":\"4b5c9118\",\"components_video-player.md\":\"6976a4b8\",\"components_video-viewer.md\":\"2276a156\",\"components_waterfall.md\":\"b5de9a16\",\"dep_create-module.md\":\"a4058b7f\",\"dep_dark.md\":\"30a52430\",\"dep_i18n.md\":\"03d8c9e2\",\"dep_lint.md\":\"6eaf183b\",\"donate_donate.md\":\"0ed1e9e3\",\"guide_auth.md\":\"5db6d54f\",\"guide_component.md\":\"8c7f03c8\",\"guide_deploy.md\":\"6cc0cffb\",\"guide_design.md\":\"60ce830a\",\"guide_fqa.md\":\"35588af1\",\"guide_index.md\":\"f04946f9\",\"guide_introduction.md\":\"32d0684d\",\"guide_mock.md\":\"514c515d\",\"guide_router.md\":\"ac437d23\",\"guide_settings.md\":\"6e476ca7\",\"guide_version.md\":\"ba3a4914\",\"hooks_useclipboard.md\":\"58247a15\",\"hooks_usecrudschemas.md\":\"2ecc0a43\",\"hooks_usenetwork.md\":\"f87e4dc0\",\"hooks_usestorage.md\":\"dec27e27\",\"hooks_usetagsview.md\":\"627f18d8\",\"hooks_usewatermark.md\":\"d89d552b\"}")</script>
    315. 

  315.     <script type="module" async src="/assets/app.51e46c58.js"></script>
    316. 

  316.   </body>
    317. 

  317. </html>
    318.