1. 程式人生 > >vue element-ui-tree樣式總結

vue element-ui-tree樣式總結

  專案要實現一個右鍵點選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