vue element-ui-tree樣式總結

　　項目要實現一個右鍵點擊tree節點彈出菜單的需求。

右鍵菜單具體實現以下：

<!-- 自定義右鍵菜單 -->
        <div v-show="menuVisible">
          <ul id="menu" v-if="this.popoverCurNodeObj.is_classify">
            <li class="menu-item" @click="addSubClassify('addSub')"><i class="icon el-icon-circle-plus-outline"></i> {{popoverText.add}}</li>
            <li class="menu-item" @click="editClassify('editSub')"><i class="icon el-icon-edit"></i> {{popoverText.edit}}</li>
            <li class="menu-item" @click="deleteClassify('deleteClassify')"><i class="icon el-icon-remove-outline"></i> {{popoverText.delete}}</li>
            <li class="menu-item" @click="addTable"><i class="icon el-icon-document"></i> {{popoverText.addTable}}</li>
          </ul>
          <ul id="menu" v-if="!this.popoverCurNodeObj.is_classify">
            <li class="menu-item" @click="editTable('editTable')"><i class="icon el-icon-circle-plus-outline"></i> {{popoverText.editTable}}</li>
            <li class="menu-item" @click="deleteTable('deleteTable')"><i class="icon el-icon-edit"></i> {{popoverText.deleteTable}}</li>
          </ul>
        </div>

 #menu {
    width: auto;
    height: auto;
    background: #fff;
    position: absolute;
    z-index: 100;
    list-style: none;
    padding: 5px;
    margin: 0;
    font-size: 14px;
    background: #fff;
    box-shadow: 3px 3px 10px rgb(168, 168, 168);
    cursor: pointer;
    .menu-item {
      display: block;
      padding: 5px;
      color: #555;
    }
    .icon {
      color: rgb(64, 158, 255);
    }
  }

mounted () {
    this.$nextTick(() => {
      document.querySelector('body').addEventListener('click', this.handleBodyClick);
    });
  },
handleBodyClick () {
      this.menuVisible = false;
},

 tree的hover與選中

.el-tree-node__content {
      &:hover {
        background: #89c2f7;
      }
    }
    .el-tree-node:focus>.el-tree-node__content{
      background-color: #5daaf0;
    }

 

      this.menuVisible = true;
      let menu = document.querySelector('#menu');
      /* 菜單定位基於鼠標點擊位置 */
      menu.style.left = event.clientX - 220 + 'px';
      menu.style.top = event.clientY - 150 + 'px';
      /* 鼠標跟隨：注意當內容超出一屏要加上scrollTop的距離 */

 

elementUI - tree橫向滾動問題

.tree{
overflow: auto;
width:80px;
height: 500px;
}
.el-tree {
min-width: 100%;
display:inline-block !important;
}

 

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