Vue组件库ElementUI实现表格加载树形数据教程

ElementUI实现表格树形列表加载教程，供大家参考，具体内容如下

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

关键代码，在el-table添加属性， :tree-props="{children: 'children'}" ，注意row必须命名为children，官网也进行了说明：

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

后台json数据：

{
    "id":3,
    "itemCode":"123",
    "approveName":"测试事项",
    "apprStatusStr":"环节名称",
    "children":[
        {
            "id":31,
            "itemCode":"111",
            "approveName":"测试事项",
            "apprStatusStr":"环节名称"
        }
    ]
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。