DynaForm

# 下拉选择框 (Select)

功能增强版的 el-select。

# 配置类型

  • select
  • selectPicker

# 演示 (Demo)

基础单选 (Basic)

Value: 1

多选 + 标签限制 (Multiple)

Value: [ 1, 2, 3 ]
<el-row :gutter="20" style="margin-top:20px;">
  <el-col :span="12">
      <h4>分组选项 (Grouped)</h4>
      <DynaForm
         v-model="groupVal"
         :config="groupConfig"
         :options="groupOptions"
      />
      <div class="demo-value">Value: </div>
  </el-col>
  <el-col :span="12">
      <h4>可搜索 + 可创建 (Filterable + Create)</h4>
      <DynaForm
         v-model="createVal"
         :config="createConfig"
         :options="basicOptions"
      />
      <div class="demo-value">Value: []</div>
  </el-col>
</el-row>

<el-row :gutter="20" style="margin-top:20px;">
  <el-col :span="12">
      <h4>一键清空 (Clearable)</h4>
      <DynaForm
         v-model="clearVal"
         :config="{ type: 'SELECTPKR', clearable: true, placeholder: '可点击右侧清空' }"
         :options="basicOptions"
      />
      <div class="demo-value">Value: 2</div>
  </el-col>
  <el-col :span="12">
      <h4>远程搜索 (Remote Search)</h4>
      <DynaForm
         v-model="remoteVal"
         :config="remoteConfig"
         :options="remoteOptions"
         @search="handleRemoteSearch"
      />
      <div class="demo-value">Value: </div>
  </el-col>
</el-row>

# 示例代码

<!-- 1. 基础单选 -->
<DynaForm
  v-model="value"
  :config="{ type: 'SELECTPKR', label: '单选', filterable: true }"
  :options="options"
/>

<!-- 2. 多选 + 限制Tag数 -->
<DynaForm
  v-model="tags"
  :config="{ 
      type: 'SELECTPKR', 
      multiple: true, 
      limit: 2, 
      filterable: true 
  }"
  :options="options"
/>

<!-- 3. 分组 -->
<DynaForm
  v-model="group"
  :config="{ type: 'SELECTPKR' }"
  :options="[
     { label: 'Group A', options: [...] },
     { label: 'Group B', options: [...] }
  ]"
/>

<!-- 4. 可创建条目 -->
<DynaForm
  v-model="newTags"
  :config="{ 
      type: 'SELECTPKR', 
      multiple: true, 
      allowCreate: true,
      filterable: true
  }"
  :options="options"
/>

# 属性列表 (config)

属性名 类型 说明
multiple Boolean 是否开启多选
limit Number 多选时最多显示的标签数
filterable Boolean 是否可搜索
allowCreate Boolean 是否允许创建新条目
valueField String 自定义值字段名
labelField String 自定义标签字段名
tagColor String 已选标签文字颜色
tagBackgroundColor String 已选标签背景颜色

← 开关 (Switch) →