geg-gas-web/docs/assets/custom_field.html-CEs-XIt2.js

import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="自定义字段" tabindex="-1"><a class="header-anchor" href="#自定义字段"><span>自定义字段</span></a></h1><p>当表单设计里面的组件无法满足业务需求时，可以自己添加字段组件。 这里用评分组件为例，评分组件需要传入一个评分值，但是表单设计里面没有这个组件，所以需要自己添加一个评分组件。</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>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>div</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>formWrap<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>Form</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>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.labelAlign<span class="token punctuation">&quot;</span></span> <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>getProps?.layout<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getProps?.wrapperCol<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleEnterPress<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>
<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)<span class="token punctuation">&quot;</span></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>getColWidth(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#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>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#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>SimpleFormItem</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>formModel[schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].field]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formApi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isWorkFlow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</span></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>schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#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>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>Col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line">            <span class="token comment">&lt;!-- 评分组件添加  --&gt;</span></span>
<span class="line"></span>
<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> </span>
<span class="line">                <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIfShow2(&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;)<span class="token punctuation">&quot;</span></span></span>
<span class="line">                <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getIsShow2(&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;)<span class="token punctuation">&quot;</span></span></span>
<span class="line">                <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>getColWidth(schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#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>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showComponent(schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#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>FormItem</span></span>
<span class="line">                        <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>
<span class="line">                        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rate<span class="token punctuation">&quot;</span></span></span>
<span class="line">                        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: &#39;请选择评分&#39; }]<span class="token punctuation">&quot;</span></span></span>
<span class="line">                        <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schemaMap[&#39;d7dfec1ff5254cfe9ab7dfa45753bef7&#39;]).labelCol<span class="token punctuation">&quot;</span></span></span>
<span class="line">                        <span class="token attr-name">:wrapperCol</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemLabelWidthProp.wrapperCol<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-rate</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>formModel.rate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:count</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>FormItem</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>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>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>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</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">// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本</span></span>
<span class="line">    <span class="token keyword">import</span> SimpleFormSetup <span class="token keyword">from</span> <span class="token string">&#39;/@/components/SimpleForm/src/SimpleFormSetup.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> Col<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Row <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">&#39;/@/components/SimpleForm/src/components/SimpleFormItem.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <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 keyword">import</span> <span class="token punctuation">{</span> CheckCircleOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@ant-design/icons-vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">import</span> CustomDevTableItem1 <span class="token keyword">from</span> <span class="token string">&#39;./CustomDevTableItem1.vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> TabPane<span class="token punctuation">,</span> Tabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">import</span> <span class="token punctuation">{</span> useItemLabelWidth <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/src/hooks/useLabelWidth&#39;</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">//根据labelwidth 生成labelCol</span></span>
<span class="line">    <span class="token keyword">const</span> formProps <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">&#39;formProps&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">const</span> itemLabelWidthProp <span class="token operator">=</span> <span class="token function">useItemLabelWidth</span><span class="token punctuation">(</span>schemaMap<span class="token punctuation">[</span><span class="token string">&#39;9a8db2186edb49879f59162ae2660b21&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> formProps<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>
<span class="line">            CheckCircleOutlined<span class="token punctuation">,</span> </span>
<span class="line">            Form<span class="token punctuation">,</span> </span>
<span class="line">            Col<span class="token punctuation">,</span> </span>
<span class="line">            SimpleFormItem<span class="token punctuation">,</span> </span>
<span class="line">            Row<span class="token punctuation">,</span> </span>
<span class="line">            FormItem<span class="token punctuation">,</span></span>
<span class="line">            CustomDevTableItem1</span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>SimpleFormSetup<span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">const</span> ret <span class="token operator">=</span> SimpleFormSetup<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">const</span> expose <span class="token operator">=</span> ctx<span class="token punctuation">.</span>expose<span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">const</span> activeKey1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            </span>
<span class="line">            <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line">                activeKey1<span class="token punctuation">,</span></span>
<span class="line">                <span class="token operator">...</span>ret</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>
<span class="line">        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
<span class="line">            <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">const</span> schemaMap <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 keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line">                    schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
<span class="line">                    <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                        schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
<span class="line">                           <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line">                               sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
<span class="line">                                   schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<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 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 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 keyword">return</span> schemaMap<span class="token punctuation">;</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">        <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token function-variable function">getIfShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIfShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<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>
<span class="line">            <span class="token function-variable function">getIsShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIsShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<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>
<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"></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>
<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 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>需要注意例子中添加了几个引用，具体可以查看源码。</p>`,4)]))}const u=s(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/adv/custom_field.html","title":"自定义字段","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744966438000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"64eedad72a7ab401fe654369ea7dcc37fbbe836e","time":1744966438000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化"},{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-4