Skip to content

隐藏数据加载方式 ​

通过 config.hiddenOptionsType 隐藏组件配置中数据加载方式下拉的部分选项。选择类组件里这项的标题是「选项数据」,数据表格是「表格数据」,JSON 组件是「JSON 规则」。

数据结构 ​

ts
type Config = {
    //隐藏选项数据的部分加载方式。当前规则已选中的类型仍会显示
    hiddenOptionsType?: Array<'struct' | 'text' | 'json' | 'fetch' | 'global' | 'dataset'>;
}
值界面文案说明
struct静态数据在设计器里逐条维护选项
text文本录入按文本批量录入选项
jsonJSON数据直接编辑 JSON
fetch远程数据通过接口加载
global全局数据源使用预定义的全局数据源
dataset业务数据使用 config.datasets 中的业务数据

基本示例 ​

只保留本地配置,隐藏远程数据和全局数据源:

vue
<template>
    <fc-designer :config="config" />
</template>

<script setup>
    const config = {
        hiddenOptionsType: ['fetch', 'global'],
    };
</script>

下拉框、单选框、多选框的「选项数据」中将不再出现「远程数据」和「全局数据源」。

各组件可用的加载方式 ​

配置对所有使用该下拉的组件生效,但每个组件原本提供的选项不同。写了当前组件不支持的类型时,该项本来就不会出现。

组件可用加载方式
下拉框、单选框、多选框、提及、穿梭框静态数据、文本录入、JSON数据、远程数据、全局数据源、业务数据
级联选择器、树形控件、树形选择同上
数据表格、Vxe 数据表格静态数据、远程数据、全局数据源、业务数据
JSON 组件静态数据、远程数据、全局数据源、业务数据
图表、MermaidJSON数据、远程数据、全局数据源、业务数据

已选中的类型仍会显示 ​

当前规则已经选中的加载方式不会被隐藏,避免打开已保存的表单后找不到原来的选项。

例如组件当前是「远程数据」,同时配置了 hiddenOptionsType: ['fetch']:

  • 这个组件的下拉里仍然能看到「远程数据」
  • 改成其他方式之后,再次打开下拉时「远程数据」不再出现

多数选择类组件新建后默认就是「静态数据」。因此只把 struct 放进 hiddenOptionsType 时,新建组件上「静态数据」仍会显示,因为它是当前选中值。

业务数据 ​

「业务数据」除了受 hiddenOptionsType 控制,还要求配置了 config.datasets。未配置业务数据时,下拉中不会出现「业务数据」。已经选用业务数据的规则仍会显示该项。清单和加载函数的写法见扩展业务数据。

vue
<template>
    <fc-designer :config="config" />
</template>

<script setup>
    const config = {
        datasets: [
            { label: '商品列表', value: 'product' },
        ],
        // 不展示业务数据入口
        hiddenOptionsType: ['dataset'],
    };
</script>