geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
af6ce6d96ed104e98e0e28f9b3ffd052b47aee0c
geg-gas-web/docs/assets/table.html-BrzZNtYJ.js

226 lines
71 KiB
JavaScript
Raw Normal View History

docs: 更新新版二开文档
2025-06-12 11:34:14 +08:00
import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("custom_searchform-C_-nGOSW.png",import.meta.url).href,l=""+new URL("table_1-Dc0vlV5m.png",import.meta.url).href,c=""+new URL("table_2-BfgKP28D.png",import.meta.url).href,o=""+new URL("table_3-DJgiqMOC.png",import.meta.url).href,i={};function u(r,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="表格" tabindex="-1"><a class="header-anchor" href="#表格"><span>表格</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="自定义表格搜索功能" tabindex="-1"><a class="header-anchor" href="#自定义表格搜索功能"><span>自定义表格搜索功能</span></a></h3><p>在某些场景，如级联、表单联动，则需要自定义搜索功能，首先，我们需要取消全开框架生成的搜索功能，需要在生成的模块中找到<strong>index.vue</strong>文件，找到<strong>useTable</strong>并<strong>schemas</strong>属性给删掉，并在需要添加<strong>showSubmitButton: false</strong>，此属性是取消原来搜索功能的搜索按钮，将<strong>showResetButton</strong>设置为false，隐藏原来搜索功能的重置按钮，经过以上操作就会发现表格自带的搜索功能消失不见。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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 attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token comment">// 前面代码省略</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">(</span>formName <span class="token operator">+</span> <span class="token string">&#39;列表&#39;</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">api</span><span class="token operator">:</span> getTestTablePage<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">rowKey</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">columns</span><span class="token operator">:</span> filterColumns<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">formConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">rowProps</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">gutter</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">schemas</span><span class="token operator">:</span> searchFormSchema<span class="token punctuation">,</span> <span class="token comment">// 原始表单显示的表单项的配置</span></span>
<span class="line"> <span class="token literal-property property">fieldMapToTime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">showResetButton</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制原始表单的重置功能，一般为“重置”按钮</span></span>
<span class="line"> <span class="token literal-property property">showSubmitButton</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制原始表单触发搜索的按钮的显隐，一般为“搜索”按钮</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">useSearchForm</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否使用搜索表单</span></span>
<span class="line"> <span class="token literal-property property">showTableSetting</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line"> <span class="token literal-property property">striped</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">actionColumn</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;操作&#39;</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> <span class="token string">&#39;action&#39;</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">slots</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">customRender</span><span class="token operator">:</span> <span class="token string">&#39;action&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">tableSetting</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">setting</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 后面省略代码</span></span>
<span class="line"></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></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，自定义搜索表单，可以用ant-design-vue中的a-form，特别注意的，自定义搜索表单的字段必须存在表格已经定义的字段里面，若不存在的话，可能会导致该字段搜索无效，具体字段可以查看<strong>index.vue</strong>所在目录下的<strong>components</strong>对应的<strong>config.ts</strong>的<strong>searchFormSchema</strong>中的<strong>field</strong>，如下：</p><p>config.ts</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">/** 省略代码 **/</span>
<span class="line">export const searchFormSchema: FormSchema[] = [</span>
<span class="line"> {</span>
<span class="line"> field: &#39;mingZi8847&#39;,</span>
<span class="line"> label: &#39;名字&#39;,</span>
<span class="line"> component: &#39;Input&#39;,</span>
<span class="line"> },</span>
<span class="line"> {</span>
<span class="line"> field: &#39;zhi4547&#39;,</span>
<span class="line"> label: &#39;值&#39;,</span>
<span class="line"> component: &#39;Input&#39;,</span>
<span class="line"> },</span>
<span class="line">];</span>
<span class="line">/** 省略代码 **/</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来就是重写搜索功能，全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽，自定义的搜索功能就是写在这个插槽里面，而<strong>BasicTable</strong>组件提供了一个搜索表格方法<strong>beforeSearchInfoChange</strong>，我们只需要把搜索的字段和对应的值传入这个方法，接口实现与表格的联动，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <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>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form</span></span>
<span class="line"> <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>inline<span class="token punctuation">&quot;</span></span></span>
<span class="line"> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customHandleSubmit<span class="token punctuation">&quot;</span></span></span>
<span class="line"> <span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>名字<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customSearchForm.mingZi8847<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">html-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-button</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 其余代码省略 --&gt;</span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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 attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token comment">// 前面代码省略</span></span>
<span class="line"><span class="token keyword">const</span> customSearchForm <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">mingZi8847</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">customHandleSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span>customSearchForm<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token comment">// 后面省略代码</span></span>
<span class="line"></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></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>特别注意</strong>：</p><p>1、在比较早的全开框架版本中，<strong>BasicTable</strong>组件的<strong>beforeSearchInfoChange</strong>并没有导出，最新版本则已经导出；若没有，则需要自己找到<strong>BasicTable</strong>组件手动导出，如下：</p><p>BasicTable.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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 attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token comment">// 前面代码省略</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">setSearchFormData</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">handleSearchInfoChange</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token comment">// 中间代码省略</span></span>
<span class="line"><span class="token function">expose</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>tableAction<span class="token punctuation">,</span> beforeSearchInfoChange<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 后面省略代码</span></span>
<span class="line"></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></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2、全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽默认是在最右侧，若需让它靠左的话，可在<strong>index.vue</strong>中添加以下样式。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</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>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
<span class="line"> <span class="token selector">// 前面代码省略</span>
<span class="line"> :deep(.ant-table-title)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token selector">.items-center</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="带有展开功能的搜索二开" tabindex="-1"><a class="header-anchor" href="#带有展开功能的搜索二开"><span>带有展开功能的搜索二开</span></a></h3><p>如果你的搜索条件比较多，而且需要保持原有的样式，可以按照下面的方式进行二开。这里隐藏了原始代码，只给出template和样式的修改部分，事件绑定可以参考源文件里的组件定义。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <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>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 默认form-item有下边距，这里写死高度，因为展开的时候还要保持下边距 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <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">height</span><span class="token punctuation">:</span> 32px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vben-basic-form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- suspensionRow样式默认带了弹出效果 但是必须和vben-basic-form连用 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-row</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ suspensionRow: isAdv }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 注意这里的层级，row部分是搜索表单，col里面的action是搜索按钮 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 不展开的时候其余的字段隐藏 注意默认样式col-8在搜索中定死了宽度280px --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <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>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <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>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <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>{display: isAdv ? &#39;block&#39; : &#39;none&#39;}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索字段6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入名称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 只要绑定事件就行 默认就开启了搜索、重置、展开这3个按钮 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form-action</span> <span class="token attr-name">:is-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isAdv<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@toggle-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleAdv<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form-action</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-row</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"> <span class="token keyword">import</span> FormAction <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/src/components/FormAction.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> isAdv <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><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">function</span> <span class="token function">toggleAdv</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 注意form-action的展开状态不是自己保存的 需要外部状态控制</span></span>
<span class="line"> isAdv<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>isAdv<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></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></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span>
<span class="line"> <span class="token comment">/*隐藏原来表单的区域 否则中间会被占满*/</span></span>
<span class="line"> <span class="token selector">:deep(.ant-table-title .items-center)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token comment">/* 让展开时的搜索按钮和表单左右显示 */</span></span>
<span class="line"> <span class="token selector">:deep(.ant-row.suspensionRow)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下 <img src="`+e+`" alt="搜索二开效果"></p><h3 id="自定义表格列" tabindex="-1"><a class="header-anchor" href="#自定义表格列"><span>自定义表格列</span></a></h3><p>在某些场景，我们需要对表格的某些列进行定制化开发，例如显示进度条，tag标签等，可在<strong>BasicTable</strong>的<strong>bodyCell</strong>插槽里面添加，在<strong>bodyCell</strong>插槽里面尽量使用<strong>v-if/v-else-if</strong>，防止匹配多列的情况，其中：<strong>column</strong>为列的配置，<strong>record</strong>为数据源。<strong>特别注意</strong>：自定义表格列会覆盖原有的列，示例代码如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <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>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></
<span class="line"> <span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#bodyCell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ column, record }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>column.dataIndex === &#39;zhi4547&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-progress</span> <span class="token attr-name">:percent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>record[column.dataIndex]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果：</p><p><img src="`+l+`" alt="自定义表格列效果"></p><h3 id="修改分页" tabindex="-1"><a class="header-anchor" href="#修改分页"><span>修改分页</span></a></h3><p>若你不需要分页，可以在<strong>BasicTable</strong>组件上，将<strong>pagination</strong>置为<strong>false</strong>即可取消分页，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token comment">&lt;!-- 前面代码省略 --&gt;</span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicTable</span> <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>registerTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dbClickRow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token comment">&lt;!-- 中间代码省略 --&gt;</span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicTable</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token comment">&lt;!-- 后面代码省略 --&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>修改分页，若需要调整分页的样式，<strong>BasicTable</strong>组件提供了获取分页配置接口<strong>getPaginationRef</strong>和设置分页配置接口<strong>setPagination</strong>，分页配置里面具体的参数可以参考<strong>Ant-Design-Vue</strong>的分页<strong>Pagination</strong>，修改分页配置生命周期<strong>onMounted</strong>修改，如下：我将分页修改成简单分页以及每页只展示1条数据。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">// 前面代码省略</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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 attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 中间代码省略</span></span>
<span class="line"><span class="token function">onMounted</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></span>
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
<span class="line"> <span class="token function">nextTick</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></span>
<span class="line"> <span class="token keyword">const</span> pagination <span class="token operator">=</span> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">getPaginationRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> pagination<span class="token punctuation">.</span>simple <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
<span class="line"> pagination<span class="token punctuation">.</span>pageSize <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span></span>
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">setPagination</span><span class="token punctuation">(</span>pagination<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 后面代码省略</span></span>
<span class="line"></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></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：</p><p><img src="`+c+`" alt="修改表格分页效果"></p><h3 id="表格的其他功能" tabindex="-1"><a class="header-anchor" href="#表格的其他功能"><span>表格的其他功能</span></a></h3><p><strong>BasicTable</strong>组件还提供了其他功能，如<strong>useTable</strong>中提供了<strong>beforeFetch</strong>和<strong>afterFetch</strong>方法，<strong>beforeFetch</strong>是表格发送请求前的拦截，可以在这里对参数进行处理；<strong>afterFetch</strong>是表格请求后返回的数据，可以在这里对返回的数据进行格式处理等，若你在<strong>afterFetch</strong>对数据进行处理，你必须把处理完的结果<strong>return</strong>回去，否则无法生效，如：我对表格返回的数据中的<strong>zhi4547</strong>全部设置为100。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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 attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token comment">// 前面代码省略</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
<span class="line"> <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 可以对筛选的参数params进行处理</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">&#39;id&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> newRes <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token operator">...</span>item<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">zhi4547</span><span class="token operator">:</span> <span class="token number">100</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">return</span> newRes<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 后面代码省略</span></span>
<span class="line"></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></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：表格zhi4547字段所在的列（表格列名为：值）进度都为100%。</p><p><img src="`+o+'" alt="拦截表格请求"></p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端暂不支持表格组件，移动端的子表展示形式是多组表单的形式，这里不多赘述。</p>',46)]))}const d=s(i,[["render",u]]),v=JSON.parse('{"path":"/front_dev/adv/table.html","title":"表格","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"自定义表格搜索功能","slug":"自定义表格搜索功能","link":"#自定义表格搜索功能","children":[]},{"level":3,"title":"带有展开功能的搜索二开","slug":"带有展开功能的搜索二开","link":"#带有展开功能的搜索二开","children":[]},{"level":3,"title":"自定义表格列","slug":"自定义表格列","link":"#自定义表格列","children":[]},{"level":3,"title":"修改分页","slug":"修改分页","link":"#修改分页","children":[]},{"level":3,"title":"表格的其他功能","slug":"表格的其他功能","link":"#表格的其他功能","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}]}],"git":{"updatedTime":1748592359000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3},{"name":"Chen_Jie_Wen","username":"","email":"chen_junior@163.com","commits":5},{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"59b422a86f2f849b8c6b350ebbee8d78762110e1","time":1748592359000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"docs: 更新高级搜索的二开介绍"},{"hash":"dc0d515ab82a6e8e8bba217158197b368453eff7","time":1748426738000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-表格其他功能"},{"hash":"1cd0de4d9c53c6e980cce3a5d661a68e82d399ad","time":1748403560000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-修改分页"},{"hash":"4af82936ff5b6445d26bbb2e9d4a24bf28f96f16","time":1748339132000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档自定义表格列"},{"hash":"262bfff5fb69dad24a8cd9532291de38cca325c1","time":1748329306000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 调整自定义表格搜索功能文档"},{"hash":"412c2a8d273e8041c74673e5a1585dcaf6d120d1","time":1748314623000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 重写table文档之自定义表格搜索功能"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}
Reference in New Issue Copy Permalink