element ui树组件render-content 树节点的内容区的渲染另一种方式

直接上代码吧,不用h的写法。

 <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps"
   :render-content="renderContentTree" @node-click="handleNodeClick">
 </el-tree>

import logoImg from '图片路径'
data() {
  return {
  	 	data: [
        {
          id: 1,
          point: 'yi',
          label: '一级 1',
          children: [
            {
              id: 4,
              point: 'er',
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  point: 'san',
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  point: 'san',
                  label: '三级 1-1-2'
                }
              ]
            }
          ],
        },
        {
          id: 2,
          point: 'yi',
          label: '一级 2',
          children: [
            {
              id: 5,
              point: 'er',
              label: '二级 2-1',
              children: [{
                id: 20,
                point: 'sn',
                label: 'sanji 333',
              }]
            },
            {
              id: 6,
              point: 'er',
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          point: 'yi',
          label: '一级 3',
          children: [
            {
              id: 7,
              point: 'er',
              label: '二级 3-1',
              children: [{
                id: 20,
                point: 'san',
                label: 'sanji 333',
              },
              {
                id: 22,
                point: 'san',
                label: 'sanji 444'
              }
              ],
            },
            {
              id: 8,
              point: 'er',
              label: '二级 3-2'
            }
          ]
        }
      ],
   }
},
methods: {
renderContentTree(h, { node, data, store }) {
  console.log('h', h);
  console.log(node.point, node.label, data, store);
  return (
    <span class="custom-tree-node">
      {data.point == 'san' ?
        <span
          on-click={ ($event) => this.handelclcik($event,data) }
          class='class_aweda'
        >
          <img src={logoImg} alt="" srcset=""></img>
        </span> :
        <span></span>
      }
      <span>
      <span>{data.label}</span>
        </span>
    </span>);
    },
    handleNodeClick() {
      alert(1)
    },
    handelclcik(e, data) {
    // 会冒泡，所以禁止了一下
      e.stopPropagation();
      e.preventDefault();
      console.log(data);
    },
},

我个人理解就是jsx的写法，和react一样。也是return的模板。