Element Tree 樹形控件自定義顯示樣式與hover事件綁定實現添加、刪除和修改
最近在搞erp項目對應後臺的管理功能，爲了加速開發使用了 vue-element-admin 開發,使用的是elementUi框架,在項目中使用element的樹形控件的時候遇到點問題,分享給大家。
首先先了解一下樹形控件: elementTree 樹形控件.
我的項目需求是實現鼠標hover上去的時候在對應的樹形結構後面顯示 添加 修改 和 刪除 並實現功能,查看了對應element文檔剛好有類似的功能,
這個自定義結點內容寫的也未免有點太唐突了點…要完成項目需求是遠遠不夠的,再往下找,沒有了
當我嘗試使用element的自定義結點,給對應的結點添加v-show="false"發現卻並沒有起作用,懷疑是自己寫法錯誤,找一個案例測了一下,不是我的問題,想起來曾經使用過iview腳手架,也做過類似的操作於是找了出來.修改一下完成了需求
<--這是我的樹形控件-->
<el-tree :data="data4" show-checkbox node-key="value" default-expand-all :expand-on-click-node="false" :render-content="renderContent">
</el-tree>
renderContent 是自定義顯示的回掉 綁定的data4是參照element但是我讓添加了一個is_show 字段,後來想想可以使用本地中間變量來判斷
renderContent(h, {
node,
data,
store
}) {
return h('span', {
style: {
// color: "red",
},
//這裏添加hover事件
on: {
'mouseenter': () => {
data.is_show = true;
},
//鼠標離開
'mouseleave': () => {
data.is_show = false;
}
}
}, [
h('span', {
//顯示名稱
}, node.label),
h('span', {
style: {
display: data.is_show ? '' : 'none',
},
}, [
//添加
h('el-button', {
props: {
type: 'text',
size: 'small',
},
style: {
marginLeft:"15px",
},
on: {
click: () => {
this.append(data)
}
}
}, "添加"),
h('el-button', {
props: {
type: 'text',
size: 'small',
},
style: {
},
on: {
click: () => {
this.amend(data)
}
}
}, "修改"),
h('el-button', {
props: {
type: 'text',
size: 'small',
},
style: {
},
on: {
click: () => {
this.remove(node, data)
}
}
}, "刪除"),
]),
]);
}
這些工作做完了來看一下效果(數據僅爲模擬數據)
大功告成,添加,修改,和刪除就簡單了這裏就不貼出來了,
另外,在添加鼠標事件的時候還遇到一個問題,比如click事件這樣寫
on: {
click: () => {
this.append(data)
}
}
但是鼠標事件就得添加"",
on: {
'mouseenter': () => {
data.is_show = true;
},
//鼠標離開
'mouseleave': () => {
data.is_show = false;
}
}
還是有點坑的…!
————————————————
轉載 ： https://blog.csdn.net/wxfdpp/article/details/83624460