传统后台开发人员。最近写管理后台使用了element-ui 。在tree这这个组件的自定义节点上碰到问题了。官方文档在这里：http://element-cn.eleme.io/#/zh-CN/component/tree源代碼：
文档提示：
使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
这个涉及到一个jsx语法，在vue上使用的话需要编译插件: babel-plugin-transform-vue-jsx这个插件是在前端开发时候写jsx代码，但是打包编译时候会转换成vue render函数写法。
后端开发没有这一套东西啊。只能手动写render了。 无奈底子薄，网上也没有找到这块代码手动重写的例子。、只能debug查看官网例子中的 h 参数是什么。发现是createElement函数。 继续找vue 的api接口文档。。然后琢磨了很久写了下面的代码。算是暂时解决了目前的问题。写此文，记录一下。利人利己。因为自己也经常在网上搜索文章。
methods:{ selectMenu(){ if(this.managerClient==""){ this.$alert("请选择系统", ‘提示‘, { confirmButtonText: ‘确定‘ }) } }, menuAdd(node,data,store){ alert(node.label); }, menuRemove(node,data,store){
}, menuEdit(node,data,store){
}, renderContent(createElement, { node, data, store }) { return createElement( ‘span‘, { style:{ ‘flex‘:‘1‘, ‘display‘:‘flex‘, ‘align-items‘:‘center‘, ‘justify-content‘:‘space-between‘, ‘font-size‘:‘14px‘, ‘padding-right‘:‘8px‘ } }, [ createElement( ‘span‘, {}, [ createElement(‘span‘,node.label) ] ), createElement( ‘span‘, {}, [ createElement(‘el-button‘, { style:{ ‘font-size‘:‘ 12px‘ }, attrs:{ ‘type‘:‘text‘ }, on:{ click:function(){ vue.menuAdd(node,data,store); } }, domProps: { innerHTML: ‘增加‘ } } ), createElement(‘el-button‘, { style:{ ‘font-size‘:‘ 12px‘ }, attrs:{ ‘type‘:‘text‘ }, on:{ click:function(){ vue.menuRemove(node,data,store); } }, domProps: { innerHTML: ‘删除‘ } } ), createElement(‘el-button‘, { style:{ ‘font-size‘:‘ 12px‘ }, attrs:{ ‘type‘:‘text‘ }, on:{ click:function(){ vue.menuEdit(node,data,store); } }, domProps: { innerHTML: ‘编辑‘ } } ) ] ) ] ); }}
原文地址：https://www.cnblogs.com/iyanjun/p/8328266.html
时间： 2024-10-01 00:02:51