配置

配置 类型 默认值 备注
data Array [] ```javascript [{ "id": "1266212814637371392", "type": "0", "label": "圆圈科技", "parentId": "0", "hasChild": true, "children": [...], "disabled": false // 节点是否禁用 }] ```
        </td>
      </tr>
      <tr>
        <td>multiple</td>
        <td>Boolean</td>
        <td>false</td>
        <td>是否是多选</td>
      </tr>
      <tr>
        <td>model-mode</td>
        <td>String</td>
        <td>'node'</td>
        <td>
          :multiple="false" 可选:'node' / 'leaf' / 'route' / 'all' / 'tree'<br />
          :multiple="true" 可选: 'node' / 'leaf' / 'all' / 'tree' / 'gather'
        </td>
      </tr>
      <tr>
        <td>model-type</td>
        <td>String</td>
        <td>'node'</td>
        <td>'node' / 'id'</td>
      </tr>
      <tr>
        <td>v-model</td>
        <td>Array</td>
        <td>[]</td>
        <td>
// 以model-type='node'为例:
//
// model-mode="node"
// 返回所有选中节点,父或子节点
[叶节点2.1, 父节点1, ...]
//
// model-mode="leaf"
// 返回叶节点
[叶节点1.1, 叶节点2.1, 叶节点2.2, ...]
//
// model-mode="route"
// 返回途径节点
[父节点1, 父节点1.1, 叶节点1.1.1(被选中)]
//
// model-mode="all"
// 返回途径节点+叶节点
[父节点1, 父节点1.1, 父节点1.1.1(被选中), 叶节点1.1.1.1, 叶节点1.1.1.2]
//
// model-mode="tree"
// 返回选中节点树结构
[{
    "id": "1266212814637371392",
    "type": "0",
    "label": "圆圈科技",
    "parentId": "0",
    "hasChild": true,
    "children": [...],
    "disabled": false
}]
//
// model-mode="gather"
// 所有选中节点,省略选中的父节点下的子节点
// 即在model-mode="node"的基础上,排除父节点全选下的子节点
[父节点1, 父节点1.1, 叶节点1.1.1(被选中), 叶节点1.1.3(被选中)]
        </td>
      </tr>
      <tr>
        <td>readonly</td>
        <td>Boolean</td>
        <td>false</td>
        <td>只读</td>
      </tr>
      <tr>
        <td>show-filter</td>
        <td>Boolean</td>
        <td>false</td>
        <td>是否显示搜索过滤框</td>
      </tr>
      <tr>
        <td>accordion</td>
        <td>Boolean</td>
        <td>false</td>
        <td>是否每次只打开一个同级树节点展开</td>
      </tr>
      <tr>
        <td>expand-level</td>
        <td>number</td>
        <td>0</td>
        <td>默认展开层级</td>
      </tr>
      <tr>
        <td>expand-all</td>
        <td>Boolean</td>
        <td>false</td>
        <td>是否展开全部</td>
      </tr>
      <tr>
        <td>filter-placeholder</td>
        <td>String</td>
        <td>'请输入关键字过滤'</td>
        <td>过滤框placeholder</td>
      </tr>
      <tr>
        <td>empty-text</td>
        <td>String</td>
        <td>'暂无数据'</td>
        <td>没有数据的提示语</td>
      </tr>
      <tr>
        <td>expand-keys</td>
        <td>array</td>
        <td>[]</td>
        <td>展开节点</td>
      </tr>
      <tr>
        <td>select-key</td>
        <td>String</td>
        <td>''</td>
        <td>单选节点</td>
      </tr>
      <tr>
        <td>check-keys</td>
        <td>array</td>
        <td>[]</td>
        <td>选中节点</td>
      </tr>
      <tr>
        <td>async</td>
        <td>Boolean</td>
        <td>false</td>
        <td>是否启用异步加载</td>
      </tr>
      <tr>
        <td>loader</td>
        <td>Promise</td>
        <td></td>
        <td>异步加载方法</td>
      </tr>
      <tr>
        <td>on-change</td>
        <td>(selectNode:当前节点, changeData:值, checkedNodes:已选节点)=>{}</td>
        <td></td>
        <td>变化事件</td>
      </tr>
      <tr>
        <td>node-click</td>
        <td>(selectNode:当前节点)=>{}</td>
        <td></td>
        <td>节点点击事件</td>
      </tr>

节点数据结构

属性 类型 备注
id String 节点id
label String 节点名
parentId String 父节点id
children Array 子节点
isLeaf Boolean 指明此节点是否是叶节点,用于触发异步加载,仅;async="true"有效

插槽

slot 备注
tree-node 自定义节点内容

方法

方法名 定义 备注
check (id:选中节点id)
uncheck (id:选中节点id)
append (node:节点) 注意其中的id、parentId要正确
remove (id:节点id)
update (node:节点) 注意其中的id、parentId要正确
文档更新时间: 2021-05-12 18:40   作者:管理员