TreeField 树表单域
基于Tree组件封装的表单域组件,可通过v-model绑定值。内置单向级联逻辑
提示
组件会透传Tree组件支持的绝大部分属性和事件绑定以及插槽,部分属性设置了默认值,此外还有少数属性外部无法覆盖。具体见Tree Attributes
基础用法
在Form中使用
本例演示如何作为表单域使用,包括设置初始值,只读模式等。
自定义节点内容
提示
Tree组件文档参照 Tree(Element)
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| value/v-model | string[] / number[] | 绑定值, node-key指定属性对应值的数组 | -- | -- |
| node-key | string | 和Tree组件同名属性意义一致,属性对应不上时无法查找节点会报错 | -- | 'id' |
| inline | boolean | 是否采用行内展示的形式。行内展示使用了flex布局让根节点在水平方向平铺,减少页面高度 | -- | -- |
| data | object[] | 数据源 | -- | -- |
| check-mode | string | 树节点的关联方式,对应Tree的check-strictly属性并增加了扩展。two-way对应false,none对应true,one-way为扩展关联方式(仅单向关联,父->子) | two-way/one-way/none | -- |
| readonly | boolean | 展示模式,不显示checkbox,仅显示选中的节点文字 | -- | -- |
Methods
组件代理了Tree组件的所有方法,具体见Tree文档
Tree Attributes
仅列举原组件受影响的字段,其他字段见原组件文档。
| 参数 | 能否覆盖 | 默认值 | 说明 |
|---|---|---|---|
| default-expand-all | 是 | true | 对于表单组件,默认展开所有节点毕竟方便操作 |
| expand-on-click-node | 是 | false | 点击节点展开对于有checkbox时容易产生误操作,故默认关闭 |
| check-strictly | 否 | -- | 组件内部维护了关联值,所以无法覆盖 |