tmagic-editor/docs/assets/guide_advanced_data-source.md.Q6P421HC.js

import{aw as s,y as i,z as e,b0 as t}from"./chunks/framework.BCBheFgR.js";const n="/tmagic-editor/docs/data-source.png",l="/tmagic-editor/docs/create-data-source.png",p="/tmagic-editor/docs/data-source-input.png",h="/tmagic-editor/docs/display-cond.png",y=JSON.parse('{"title":"数据源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced/data-source.md","filePath":"guide/advanced/data-source.md"}'),d={name:"guide/advanced/data-source.md"};function r(o,a,c,k,E,g){return e(),i("div",null,a[0]||(a[0]=[t('<h1 id="数据源" tabindex="-1">数据源 <a class="header-anchor" href="#数据源" aria-label="Permalink to &quot;数据源&quot;">​</a></h1><h2 id="使用数据源" tabindex="-1">使用数据源 <a class="header-anchor" href="#使用数据源" aria-label="Permalink to &quot;使用数据源&quot;">​</a></h2><h3 id="添加数据源" tabindex="-1">添加数据源 <a class="header-anchor" href="#添加数据源" aria-label="Permalink to &quot;添加数据源&quot;">​</a></h3><p>在编辑器左侧边栏中选中数据源，在数据源面板右上角添加中选择对应的数据源类型（默认提供了两种基础的数据源）</p><p><a href="/data-source.png" target="_blank"><img src="'+n+'" alt="alt 数据源列表" title="数据源列表"></a></p><h3 id="配置属性字段" tabindex="-1">配置属性字段 <a class="header-anchor" href="#配置属性字段" aria-label="Permalink to &quot;配置属性字段&quot;">​</a></h3><p><a href="/create-data-source.png" target="_blank"><img src="'+l+`" alt="alt 新增数据源" title="新增数据源"></a></p><h4 id="基础数据源" tabindex="-1">基础数据源 <a class="header-anchor" href="#基础数据源" aria-label="Permalink to &quot;基础数据源&quot;">​</a></h4><p>静态数据，不会自动更新，可以通过配置方法，在方法中更新数据源</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dataSource</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  dataSource.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>然后再组件的事件联动中关联此方法，来触发数据源更新</p><h4 id="http数据源" tabindex="-1">HTTP数据源 <a class="header-anchor" href="#http数据源" aria-label="Permalink to &quot;HTTP数据源&quot;">​</a></h4><p>通过配置HTTP相关参数(url, query, body, header等)通过网络api获取数据，该数据源拥有request方法，可通过此方法来刷新数据源</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dataSource</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  dataSource.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="在组件中使用" tabindex="-1">在组件中使用 <a class="header-anchor" href="#在组件中使用" aria-label="Permalink to &quot;在组件中使用&quot;">​</a></h3><h4 id="数据源模板输入框-data-source-input" tabindex="-1">数据源模板输入框（data-source-input） <a class="header-anchor" href="#数据源模板输入框-data-source-input" aria-label="Permalink to &quot;数据源模板输入框（data-source-input）&quot;">​</a></h4><p>formConfig.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data-source-input&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><p><a href="/data-source-input.png" target="_blank"><img src="`+p+`" alt="alt 数据源模版" title="数据源模版"></a></p><h4 id="数据源字段选择器输入框-data-source-field-select" tabindex="-1">数据源字段选择器输入框（data-source-field-select) <a class="header-anchor" href="#数据源字段选择器输入框-data-source-field-select" aria-label="Permalink to &quot;数据源字段选择器输入框（data-source-field-select)&quot;">​</a></h4><p>formConfig.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data-source-filed-select&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h4 id="数据源选择器-data-source-select" tabindex="-1">数据源选择器（data-source-select) <a class="header-anchor" href="#数据源选择器-data-source-select" aria-label="Permalink to &quot;数据源选择器（data-source-select)&quot;">​</a></h4><p>formConfig.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data-source-select&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h4 id="数据源方法选择器-data-source-method-select" tabindex="-1">数据源方法选择器（data-source-method-select) <a class="header-anchor" href="#数据源方法选择器-data-source-method-select" aria-label="Permalink to &quot;数据源方法选择器（data-source-method-select)&quot;">​</a></h4><p>formConfig.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data-source-method-select&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h4 id="显示条件" tabindex="-1">显示条件 <a class="header-anchor" href="#显示条件" aria-label="Permalink to &quot;显示条件&quot;">​</a></h4><p>当配置的条件成立时显示，反之隐藏</p><p><a href="/display-cond.png" target="_blank"><img src="`+h+'" alt="alt 显示条件" title="显示条件"></a></p><h2 id="数据源开发" tabindex="-1">数据源开发 <a class="header-anchor" href="#数据源开发" aria-label="Permalink to &quot;数据源开发&quot;">​</a></h2><h3 id="数据源规范" tabindex="-1">数据源规范 <a class="header-anchor" href="#数据源规范" aria-label="Permalink to &quot;数据源规范&quot;">​</a></h3><p>数据源的基础形式，需要有四个文件</p><ul><li>index 入口文件，引入下面几个文件</li><li>formConfig 表单配置描述</li><li>initValue 表单初始值</li><li>event 定义联动事件，具体可以参考<a href="./coupling.html#组件联动">组件联动</a></li><li>dataSource 数据源逻辑代码</li></ul>',35)]))}const b=s(d,[["render",r]]);export{y as __pageData,b as default};