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' ?<spanon-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的模板。