傳統后台開發人員。
最近寫管理后台使用了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: '編輯'
}
}
)
]
)
]
);
}
}