下拉选择 控件 可视化代码生成平台 · 选择类控件
<div style="max-width:920px;margin:0 auto;font-family:-apple-system,'Microsoft YaHei',sans-serif;color:#1f2937;line-height:1.7;"><div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">下拉选择 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 选择类控件（7/14）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>单选且选项较多（>4 个）或需关联其它表时首选。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(50)</code>（关联表存 id 时建议 <code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">int</code>）。<br>
<b>列表/搜索：</b>列表显示翻译后的标签；搜索为下拉单选筛选。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">下拉框，选中项展示；展开为选项列表（静态字典或关联表）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">点击展开；选择即赋值；选项多时支持搜索型下拉。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">与文本同族边框；可设占位"请选择"、是否可搜索。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">存"值"而非标签；静态字典为值=标签映射；关联表存外键值；搜索按相等或标签回查。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">分组</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">基础</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名 / 标签 / 提示 / 必填 / 默认值</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认值填"值"（如 1）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">显示</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表 / 可搜索 / 排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">可搜索时生成下拉筛选。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">校验</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">无特殊</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">必填时未选拦截。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字典</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">静态字典</td><td style="border:1px solid #e5e7eb;padding:7px 10px;"><code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">值=标签</code> 换行分隔，如 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">1=上架\n0=下架</code>。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字典</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">关联表 ref</td><td style="border:1px solid #e5e7eb;padding:7px 10px;"><code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">ref:表名,值列,标签列</code>，如 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">ref:t_demo_category,id,name</code>，下拉实时查库。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">专属</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">空选项</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">是否含"请选择/全部"占位项（默认含）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">高级</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏，不删列不丢数据。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">所属分类（ref 关联表，可输入过滤）</span>
<select style="width:220px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;background:#fff;">
<option>请选择分类</option>
<option selected>1 - 虚拟主机</option>
<option>2 - 云服务器</option>
<option>3 - 域名</option>
</select>
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">字段名: cat_id | 控件: select | 字典: ref:t_demo_category,id,name | 空选项: 是</pre>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：选项会增改（如分类、栏目）一律用 ref 关联表；固定枚举（状态、类型）用静态字典；存储按"值"（分类用 id 则改 int 列）。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">下拉选择 控件文档 · 随工具迭代更新</div> 有使用上的疑惑不要闷着，直接回帖提问，会有人帮忙解答📝
页:
[1]