<template>
  <div class="ht-base-tree-right-click-demo">
    <ht-base-tree :data="data6" @on-contextmenu="handleContextMenu">
      <template slot="contextMenu">
        <ht-base-dropdown-item @click.native="handleContextMenuEdit"
          >编辑</ht-base-dropdown-item
        >
        <ht-base-dropdown-item
          @click.native="handleContextMenuDelete"
          style="color: #ed4014"
          >删除</ht-base-dropdown-item
        >
      </template>
    </ht-base-tree>
  </div>
</template>

<script>
export default {
  name: "HtBaseTreeRightClickDemo",

  data() {
    return {
      data6: [
        {
          title: "parent 1",
          expand: true,
          contextmenu: true,
          children: [
            {
              title: "parent 1-1",
              expand: true,
              contextmenu: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  contextmenu: true,
                },
                {
                  title: "leaf 1-1-2",
                  contextmenu: true,
                },
              ],
            },
            {
              title: "parent 1-2",
              expand: true,
              contextmenu: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  contextmenu: true,
                },
                {
                  title: "leaf 1-2-1",
                  contextmenu: true,
                },
              ],
            },
          ],
        },
      ],
      contextData: null,
    };
  },
  methods: {
    handleContextMenu(data) {
      this.contextData = data;
    },
    handleContextMenuEdit() {
      this.$Message.info("Click edit of" + this.contextData.title);
    },
    handleContextMenuDelete() {
      this.$Message.info("Click delete of" + this.contextData.title);
    },
  },
};
</script>

 
 
<style lang="less">
.ht-base-tree-node-demo {
}
</style>

