el-tree的内外层数据结构不一致

最新推荐文章于 2025-10-27 11:19:33 发布

原创最新推荐文章于 2025-10-27 11:19:33 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #前端框架 #elementui

在Vue中，el-tree组件允许内外层数据格式不一致，通过props属性进行映射。例如，当内部节点的属性名如childId和childLabel，而外部是id和label时，可以定义treeProps来指定对应关系，使组件能正确渲染和操作数据。

el-tree的内外层数据结构不一致—用props

在使用 el-tree 组件时，内外层数据格式和属性名并不一定要一致。但是，如果内外层数据格式和属性名一致，使用起来会更加方便和简单。

如果内外层数据格式不一致，可以使用 prop 属性来指定内部节点和外部节点的对应关系，例如：

<template>
  <el-tree :data="treeData" :props="treeProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Parent',
          children: [
            {
              childId: 2,
              childLabel: 'Child'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label',
        id: 'id'
      }
    }
  }
}
</script>

本例中children属性里面的属性名是childId和childLabel，外面的属性名是id和label。
我们使用 treeProps 对象指定映射，其中键是 children 外部的属性名称，value 是 children 内部的属性名称。