vue-element-plus-admin-doc/assets/components_search.md.ff5107ed.js

import{o as n,c as s,a}from"./app.c38d1953.js";const t='{"title":"Search 查询组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":3,"title":"基础用法","slug":"基础用法"},{"level":3,"title":"useSearch","slug":"usesearch"},{"level":2,"title":"Search 属性","slug":"search-属性"},{"level":2,"title":"Search 事件","slug":"search-事件"},{"level":2,"title":"Search 方法","slug":"search-方法"}],"relativePath":"components/search.md","lastUpdated":1721206001124}',p={},o=a('<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">\n<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>\n<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>\n<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>\n\n<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>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>\n    label<span class="token operator">:</span> <span class="token string">&#39;input&#39;</span><span class="token punctuation">,</span>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n</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>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n  <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>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n\n</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">\n<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>\n<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>\n<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>\n<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>\n<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>\n<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>\n<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>\n<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>\n\n<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>\n\n<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>\n<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\n\n<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>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Select&#39;</span><span class="token punctuation">,</span>\n    componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>\n      options<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span>\n          label<span class="token operator">:</span> <span class="token string">&#39;option1&#39;</span><span class="token punctuation">,</span>\n          value<span class="token operator">:</span> <span class="token string">&#39;1&#39;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span>\n          label<span class="token operator">:</span> <span class="token string">&#39;option2&#39;</span><span class="token punctuation">,</span>\n          value<span class="token operator">:</span> <span class="token string">&#39;2&#39;</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">]</span><span class="token punctuation">,</span>\n      on<span class="token operator">:</span> <span class="token punctuation">{</span>\n        <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>\n          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;RadioGroup&#39;</span><span class="token punctuation">,</span>\n    componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>\n      options<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span>\n          label<span class="token operator">:</span> <span class="token string">&#39;option-1&#39;</span><span class="token punctuation">,</span>\n          value<span class="token operator">:</span> <span class="token string">&#39;1&#39;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span>\n          label<span class="token operator">:</span> <span class="token string">&#39;option-2&#39;</span><span class="token punctuation">,</span>\n          value<span class="token operator">:</span> <span class="token string">&#39;2&#39;</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">]</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field5&#39;</span><span class="token punctuation">,</span>\n    component<span class="token operator">:</span> <span class="token string">&#39;DatePicker&#39;</span><span class="token punctuation">,</span>\n    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>\n    componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>\n      type<span class="token operator">:</span> <span class="token string">&#39;date&#39;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field6&#39;</span><span class="token punctuation">,</span>\n    component<span class="token operator">:</span> <span class="token string">&#39;TimeSelect&#39;</span><span class="token punctuation">,</span>\n    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>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field8&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field9&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field10&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field11&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field12&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field13&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field14&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field15&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field16&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field17&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    field<span class="token operator">:</span> <span class="token string">&#39;field18&#39;</span><span class="token punctuation">,</span>\n    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>\n    component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n\n<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>\n\n<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>\n  <span class="token function">setProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    isCol<span class="token operator">:</span> grid\n  <span class="token punctuation">}</span><span class="token punctuation">)</span>\n  <span class="token comment">// isGrid.value = grid</span>\n<span class="token punctuation">}</span>\n\n<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>\n\n<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>\n  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>\n<span class="token punctuation">}</span>\n\n<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>\n\n<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>\n  layout<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&#39;bottom&#39;</span>\n  buttonPosition<span class="token punctuation">.</span>value <span class="token operator">=</span> position\n<span class="token punctuation">}</span>\n\n<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>\n  <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>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>\n        path<span class="token operator">:</span> <span class="token string">&#39;componentProps.options&#39;</span><span class="token punctuation">,</span>\n        value<span class="token operator">:</span> res<span class="token punctuation">.</span>data\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<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>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<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>\n  <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n    <span class="token punctuation">{</span>\n      field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>\n      path<span class="token operator">:</span> <span class="token string">&#39;remove&#39;</span><span class="token punctuation">,</span>\n      value<span class="token operator">:</span> <span class="token boolean">true</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">]</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<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>\n  <span class="token function">setSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n    <span class="token punctuation">{</span>\n      field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>\n      path<span class="token operator">:</span> <span class="token string">&#39;remove&#39;</span><span class="token punctuation">,</span>\n      value<span class="token operator">:</span> <span class="token boolean">false</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">]</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<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>\n  <span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    field1<span class="token operator">:</span> <span class="token string">&#39;Joy&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<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>\n<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>\n  searchLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>\n  <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>\n    searchLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<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>\n<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>\n  resetLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>\n  <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>\n    resetLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n</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>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ContentWrap</span>\n    <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>\n    <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>\n  <span class="token punctuation">&gt;</span></span>\n    <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>\n    <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>\n      {{ t(&#39;searchDemo.restore&#39;) }} {{ t(&#39;searchDemo.grid&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n\n    <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>\n      {{ t(&#39;searchDemo.button&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n\n    <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>\n      {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.left&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n    <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>\n      {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.center&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n    <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>\n      {{ t(&#39;searchDemo.bottom&#39;) }} {{ t(&#39;searchDemo.position&#39;) }}-{{ t(&#39;searchDemo.right&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n    <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>\n      {{ t(&#39;formDemo.select&#39;) }} {{ t(&#39;searchDemo.dynamicOptions&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n    <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>\n    <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>\n    <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>\n\n    <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>\n      {{ t(&#39;searchDemo.search&#39;) }} {{ t(&#39;searchDemo.loading&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n    <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>\n      {{ t(&#39;searchDemo.reset&#39;) }} {{ t(&#39;searchDemo.loading&#39;) }}\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ContentWrap</span><span class="token punctuation">&gt;</span></span>\n\n  <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>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Search</span>\n      <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>\n      <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>\n      <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>\n      <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>\n      <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>\n      <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>\n      <span class="token attr-name">show-expand</span>\n      <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>\n      <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>\n      <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>\n      <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>\n    <span class="token punctuation">/&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ContentWrap</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n\n</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>\n</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>',23);p.render=function(a,t,p,e,c,l){return n(),s("div",null,[o])};export default p;export{t as __pageData};