踩坑日记1：el-tree模板插槽参数#default="{ node, data }"的真面目

el-tree自定义节点内容不可避免， 由于官方文档并未讲明，帮大家试验一下，少走些弯路吧。

问题

访问node.projectCode,页面一片空白，真开心

<template>
  <el-tree
      :data="data"
      :props="defaultProps"
  >
    <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.projectCode }}</span>
        </span>
    </template>
  </el-tree>
</template>

<script setup>
import { ElTree } from 'element-plus'

const defaultProps = {
  children: 'children',
  label: 'label',
}

const data = [
  {
    id: '依托答辩',
    label: '1栋',
    projectCode: '001',
    children: [],
  }
]
</script>

历程

刚开始以为是defaultProps的问题，没有注册属性就不能被node访问了吗，但是我尝试了node.id，是能够呈现的，看来不是他的问题，因为defaultProps里我也没有注册id，直到我尝试通过data访问……

解决

代码基本没变，将模板里的直接读取，改为函数获取，扒一扒这两个参数的真面目

尽量精简，主要是看效果

<el-tree
    :data="data"
    :props="defaultProps"
>
  <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ getLabel(node,data) }}</span>
      </span>
  </template>
</el-tree>

const defaultProps = {
  children: 'children',
  label: 'label',
}
const getLabel = (node,data) => {
  console.log(node,data)
  return node.label
}
const data = [
  {
    id: '依托答辩',
    label: '1栋',
    projectCode: '001',
    children: []
  }
]

好，看控制台，一目了然

ok，什么里面有什么，知道以后就可以放心的拿了