DynaForm

# 树形选择器 (TreeSelect)

下拉树组件，结合 Select 和 Tree 的功能。

# 配置类型

  • selecttree
  • deptPicker

# 演示 (Demo)

单选 (Single)

Value:

多选 (Multiple)

Value: []
<el-row :gutter="20" style="margin-top:20px">
   <el-col :span="12">
      <h4>仅选叶子节点 (Only Leaf)</h4>
      <DynaForm
        v-model="leafVal"
        :config="leafConfig"
        :options="options"
      />
      <div class="demo-value">Value: []</div>
   </el-col>
</el-row>

# 示例代码

<!-- 1. 单选 (任意节点) -->
<DynaForm
  v-model="deptId"
  :config="{
    type: 'SELTREE',
    label: '部门',
    checkStrictly: true
  }"
  :options="treeData"
/>

<!-- 2. 多选 (联动) -->
<DynaForm
  v-model="deptIds"
  :config="{
    type: 'SELTREE',
    label: '部门',
    multiple: true,
    checkStrictly: false
  }"
  :options="treeData"
/>

<!-- 3. 仅选择叶子节点 -->
<DynaForm
  v-model="leafIds"
  :config="{
    type: 'SELTREE',
    label: '部门',
    multiple: true,
    disableBranchNodes: true
  }"
  :options="treeData"
/>

# 属性列表 (config)

属性名 类型 说明
multiple Boolean 是否开启多选
checkStrictly Boolean 是否严格模式 (父子不互相关联)
disableBranchNodes Boolean 是否禁用分支节点 (仅允许选择叶子节点)
filterable Boolean 是否可搜索
valueField String 自定义值字段名
labelField String 自定义标签字段名
childrenField String 自定义子级字段名

← 人员选择器 (PersonPicker) →