树形选择（form-tree-select）

树形选择器，支持单选多选。

基本使用

适用广泛的基础单选

<template>
  <itv-form label-position="top">
    <itv-form-tree-select label="水果" v-model="value" :options="data"></itv-form-tree-select>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
        data: [{
            label: "苹果",
            id: 1,
          },
          {
            label: "香蕉",
            id: 2,
          },
        ],
      };
    },
  };
</script>

Expand Copy Copy

禁用状态

选择器不可用状态

<template>
  <itv-form label-position="top">
    <itv-form-tree-select label="水果" v-model="value" :options="data" disabled></itv-form-tree-select>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
        data: [{
            label: "苹果",
            id: 1,
          },
          {
            label: "香蕉",
            id: 2,
          },
        ],
      };
    },
  };
</script>

Expand Copy Copy

基础多选

适用性较广的基础多选，用 Tag 展示已选项

<template>
  <itv-form label-position="top">
    <itv-form-tree-select label="水果" v-model="value" :options="data" collapseTags multiple containHalfChecked></itv-form-tree-select>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        value: [1, 2],
        data: [{
            label: "水果",
            id: 1,
            children: [
              { label: "苹果", id: 2 }, { label: "香蕉", id: 3 }
            ]
          },
          {
            label: "蔬菜",
            id: 4,
            children: [
              { label: "西红柿", id: 5 }, { label: "上海青", id: 6 }
            ]
          },
        ],
      };
    },
  };
</script>

Expand Copy Copy

多选清空

包含清空按钮，可将选择器清空为初始状态

<template>
  <itv-form label-position="top">
    <itv-form-tree-select label="水果" v-model="value" :options="data" collapseTags multiple containHalfChecked clearable></itv-form-tree-select>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        value: [1, 2],
        data: [{
            label: "苹果",
            id: 1,
          },
          {
            label: "香蕉",
            id: 2,
          },
          {
            label: "桃子",
            id: 3,
          },
        ],
      };
    },
  };
</script>

Expand Copy Copy

Attributes

TIP

默认继承FormItem基础属性FormItem组件。

属性名	类型	默认值	说明
props	Object	配置选项，具体看下表	配置项
options	Array	[]	选项列表数据(树形结构的对象数组)
multiple	Boolean	false	是否多选
collapseTags	Boolean	false	多选时是否将选中值按文字的形式展示
checkStrictly	Boolean	false	是否严格的遵循父子不互相关联
containHalfChecked	Boolean	false	多选包含半选中的节点
placeholder	String	请选择数据	输入框占位文本
value / v-model	[String, Number, Array]	""	绑定值
disabled	Boolean	false	是否禁用
clearable	Boolean	clearable	可清空选项
defaultExpandAll	Boolean	true	是否默认展开所有节点
defaultExpandedKeys	Array	[]	默认展开的节点的 key 的数组

Props

属性名	类型	默认值	说明
value	String	id	主键（唯一值）
label	String	label	节点标签为节点对象的某个属性值
disabled	String	disabled	节点选择框是否禁用为节点对象的某个属性值
isLeaf	String	isLeaf	是否为叶子节点
children	String	children	子树为节点对象的某个属性值

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	单选时为选中对象，多选时为选中列表，支持设置包含半选中的节点，是否严格的遵循父子不互相关联属性