隐藏数据加载方式
通过 config.hiddenOptionsType 隐藏组件配置中数据加载方式下拉的部分选项。选择类组件里这项的标题是「选项数据」,数据表格是「表格数据」,JSON 组件是「JSON 规则」。
数据结构
ts
type Config = {
//隐藏选项数据的部分加载方式。当前规则已选中的类型仍会显示
hiddenOptionsType?: Array<'struct' | 'text' | 'json' | 'fetch' | 'global' | 'dataset'>;
}| 值 | 界面文案 | 说明 |
|---|---|---|
struct | 静态数据 | 在设计器里逐条维护选项 |
text | 文本录入 | 按文本批量录入选项 |
json | JSON数据 | 直接编辑 JSON |
fetch | 远程数据 | 通过接口加载 |
global | 全局数据源 | 使用预定义的全局数据源 |
dataset | 业务数据 | 使用 config.datasets 中的业务数据 |
基本示例
只保留本地配置,隐藏远程数据和全局数据源:
vue
<template>
<fc-designer :config="config" />
</template>
<script setup>
const config = {
hiddenOptionsType: ['fetch', 'global'],
};
</script>下拉框、单选框、多选框的「选项数据」中将不再出现「远程数据」和「全局数据源」。
各组件可用的加载方式
配置对所有使用该下拉的组件生效,但每个组件原本提供的选项不同。写了当前组件不支持的类型时,该项本来就不会出现。
| 组件 | 可用加载方式 |
|---|---|
| 下拉框、单选框、多选框、提及、穿梭框 | 静态数据、文本录入、JSON数据、远程数据、全局数据源、业务数据 |
| 级联选择器、树形控件、树形选择 | 同上 |
| 数据表格、Vxe 数据表格 | 静态数据、远程数据、全局数据源、业务数据 |
| JSON 组件 | 静态数据、远程数据、全局数据源、业务数据 |
| 图表、Mermaid | JSON数据、远程数据、全局数据源、业务数据 |
已选中的类型仍会显示
当前规则已经选中的加载方式不会被隐藏,避免打开已保存的表单后找不到原来的选项。
例如组件当前是「远程数据」,同时配置了 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>

