# TreeList api

## 实例

```html
<template>
  <div class="demo">
    <tree-list 
      :data="treeData"
      :extro-render="extroRender"
      :on-node-edit="nodeEdit" 
      :on-node-append="nodeAppend" 
      :on-node-remove="nodeRemove"
      @on-select-change="nodeSelect" 
      editable>
    </tree-list>
  </div>
</template>

<script>
import TreeList from "@/components/common/TreeList";

export default {
  name: "demo",
  components: {
    TreeList
  },
  data() {
    return {
      dataList: [
        {
          title: "parent 1",
          id: "1",
          expand: true,
          children: [
            {
              title: "parent 1-1",
              id: "1-1",
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  id: "1-1-1"
                },
                {
                  title: "leaf 1-1-2",
                  id: "1-1-2"
                }
              ]
            },
            {
              title: "parent 1-2",
              id: "1-2",
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  id: "1-2-1"
                },
                {
                  title: "leaf 1-2-2",
                  id: "1-2-2"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    extroRender(node) {
      return {
        name: node.id + "-" + node.title
      };
    },
    nodeSelect(nodes) {
      console.log(nodes);
    },
    nodeEdit(node) {
      console.log(this.treeData);
      console.log(node);
    },
    nodeAppend(node) {
      if (!node.node.children) node.node.children = [];
      node.node.children.push({
        name: "新增001",
        title: "新增001",
        description: "",
        radioUrl: ""
      });
      console.log(this.treeData);
    },
    nodeRemove(root, node, callback) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "确定要删除当前节点吗？",
        onOk: () => {
          callback();
        }
      });
      console.log(node);
    }
  }
};
</script>
```

## TreeList props

在Tree组件的props基础上新增如下prop：

| 属性           | 说明                                                                                          | 类型     | 默认值 |
| -------------- | --------------------------------------------------------------------------------------------- | -------- | ------ |
| editable       | 节点是否可编辑                                                                                | Boolean  | false  |
| extro-render   | 额外字段的信息的解析函数                                                                      | Function | {}     |
| on-node-append | 当前结点向下添加数据时的钩子，返回字段为 node-当前节点数据                                    | Function | -      |
| on-node-edit   | 当前结点向下添加数据时的钩子，返回字段为 node-当前节点数据                                    | Function | -      |
| on-node-remove | 当前结点向下添加数据时的钩子，返回字段为 root, node, callback，执行callback会自动删除当前节点 | Function | -      |

**注意：**
- extro-render：会在现有node字段信息基础上新增新定义的字段信息，如果原node中已用改字段，则会覆盖原node中的字段信息。

## TreeList events

与Tree保持一致


#### tips

- root 信息
  
  当前树形结构数据一维节点对象数组，数组中节点对象顺序为树形结构节点从上到下依次顺序。