search
search
组件用于快速生成一组搜索框。
模板:
<yi-search :default-where="query.where" @get-where="handleGetWhere" :columns="columns" @handle-select="init"></yi-search>
如下即可生成一个 input
输入框
// columns
[
{..., search: { type: 'input', s: '='}}
]
参数 s
取值为:=
, in
, like
left like
right like
, between
单选框 select
:
{..., search: { type: 'select', value: 1, options: [
{ value: 1, label: '' }, { value: 2, label: '' }, ...
] }}
按钮组 btnGroup
, options
同上
多选框 selects
, options
同上
单选 radio
, options
同上
多选 checkbox
, options
同上
远程单选 remoteSelect
{..., search: { type: 'remoteSelect', option: {
url: '', labelField: '', valueField: '',paginate: true, ...
}}}
远程多选 remoteSelects
, option
同上
日期 date
:
{ ..., search: { type: 'date' } }
范围 inputs
:
{ ..., search: { type: 'inputs' } }
开关 switch
:
{ ..., search: { type: 'switch' } }
自定义 custom
<p><code>search</code> 组件用于快速生成一组搜索框。<br>模板:
</p><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="tag"><yi-search</span><span class="pln"> :</span><span class="atn">default-where</span><span class="pun">=</span><span class="atv">"query.where"</span><span class="pln"> @</span><span class="atn">get-where</span><span class="pun">=</span><span class="atv">"handleGetWhere"</span><span class="pln"> :</span><span class="atn">columns</span><span class="pun">=</span><span class="atv">"columns"</span><span class="pln"> @</span><span class="atn">handle-select</span><span class="pun">=</span><span class="atv">"init"</span><span class="tag">></yi-search></span></code></li></ol></pre><p>如下即可生成一个 <code>input</code> 输入框</p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// columns</span></code></li><li class="L1"><code><span class="pun">[</span></code></li><li class="L2"><code><span class="pln"> </span><span class="pun">{...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'input'</span><span class="pun">,</span><span class="pln"> s</span><span class="pun">:</span><span class="pln"> </span><span class="str">'='</span><span class="pun">}}</span></code></li><li class="L3"><code><span class="pun">]</span></code></li></ol></pre><p>参数 <code>s</code> 取值为:<code>=</code>, <code>in</code>, <code>like</code> <code>left like</code> <code>right like</code>, <code>between</code></p>
<p>单选框 <code>select</code>:</p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">{...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'select'</span><span class="pun">,</span><span class="pln"> value</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></code></li><li class="L1"><code><span class="pln"> </span><span class="pun">{</span><span class="pln"> value</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> value</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">...</span></code></li><li class="L2"><code><span class="pun">]</span><span class="pln"> </span><span class="pun">}}</span></code></li></ol></pre><p>按钮组 <code>btnGroup</code>, <code>options</code> 同上<br>多选框 <code>selects</code>, <code>options</code> 同上<br>单选 <code>radio</code>, <code>options</code> 同上<br>多选 <code>checkbox</code>, <code>options</code> 同上<br>远程单选 <code>remoteSelect</code></p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">{...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'remoteSelect'</span><span class="pun">,</span><span class="pln"> option</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln"> url</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> labelField</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> valueField</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln">paginate</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span></code></li><li class="L2"><code><span class="pun">}}}</span></code></li></ol></pre><p>远程多选 <code>remoteSelects</code>, <code>option</code> 同上<br>日期 <code>date</code>:</p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">{</span><span class="pln"> </span><span class="pun">...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'date'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span></code></li></ol></pre><p>范围 <code>inputs</code>:</p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">{</span><span class="pln"> </span><span class="pun">...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'inputs'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span></code></li></ol></pre><p>开关 <code>switch</code>:</p>
<pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">{</span><span class="pln"> </span><span class="pun">...,</span><span class="pln"> search</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'switch'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span></code></li></ol></pre><p>自定义 <code>custom</code></p>