vue element-ui-tree樣式總結
阿新 • • 發佈:2018-12-05
專案要實現一個右鍵點選tree節點彈出選單的需求。(暫時沒做出來,後續待更新)。
1.從element裡面找到了自定義的。(詳見UI中tree自定義節點內容)。
2.直接上程式碼。
renderContent (h, { node, data, store }) { return h('span', { style: { color: '#606266' }, on: { // 'contextmenu': () => { // Vue.set(data, 'is_show', true);// }, 'mouseenter': () => { // Vue.set(data, 'is_show', true); }, 'mouseleave': () => { // Vue.set(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.addSubClassify('addSub'); Vue.set(data,'is_show', false); } } }, '新增子分類'), h('el-button', { props: { type: 'text', size: 'small' }, style: { }, on: { click: () => { this.editClassify('editSub'); Vue.set(data, 'is_show', false); } } }, '編輯分類'), h('el-button', { props: { type: 'text', size: 'small' }, style: { }, on: { click: () => { this.deleteClassify('deleteClassify'); Vue.set(data, 'is_show', false); } } }, '刪除分類'), h('el-button', { props: { type: 'text', size: 'small' }, style: { }, on: { click: () => { this.addTable(); Vue.set(data, 'is_show', false); } } }, '新增表') ]) ]); },
3.摘自網上相關參考連結。
1)https://blog.csdn.net/Bonjourjw/article/details/80805463
2)https://blog.csdn.net/bonjourjw/article/details/81108951
3)https://blog.csdn.net/wxfdpp/article/details/83624460