msyj-admin-org/src/components/common/TreeList/intro.md

TreeList api

实例

<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 信息
  

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