vue2-element ui tree鼠标右击显示新建

转载https://blog.csdn.net/weixin_45682560/article/details/111036455

先下载

npm install @xunlei/vue-context-menu --save

<template>
  <div id="dataPage">
    <el-tree
      id="el-tree"
      :data="flowTree.root"
      :props="flowTree.props"
      @node-click="selectFlow"
      @node-contextmenu="rightClick"
    />
    <vue-context-menu
      :target="contextMenuTarget"
      :show="contextMenuVisible"
      class="right-menu"
      @update:show="(show) => (contextMenuVisible = show)"
    >
      <a href="javascript:;" @click="createDatabaseOrTable">新建</a>
      <a href="javascript:;" @click="deleteDatabaseOrTable">删除</a>
      <!-- <a href="javascript:;" @click="">上移</a>
      <a href="javascript:;" @click="">下移</a> -->
    </vue-context-menu>

    <!--我添加的-开始 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--我添加的-结束-->
  <el-button v-if="xinjian">新建</el-button>
  </div>
</template>
<script>
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
export default {
  components: {
    'vue-context-menu': VueContextMenu
  },
  data() {
    return {
      xinjian: false,
      dialogVisible: false,
      flowTree: {
        root: [
          {
            id: '11',
            label: '一级 1',
            children: [
              {
                id: '22',
                label: '二级 1-1',
                children: [
                  {
                    label: '三级 1-1-1'
                  }
                ]
              }
            ]
          },
          {
            label: '一级 2',
            children: [
              {
                label: '二级 2-1',
                children: [
                  {
                    label: '三级 2-1-1'
                  }
                ]
              },
              {
                label: '二级 2-2',
                children: [
                  {
                    label: '三级 2-2-1'
                  }
                ]
              }
            ]
          },
          {
            label: '一级 3',
            children: [
              {
                label: '二级 3-1',
                children: [
                  {
                    label: '三级 3-1-1'
                  }
                ]
              },
              {
                label: '二级 3-2',
                children: [
                  {
                    label: '三级 3-2-1'
                  }
                ]
              }
            ]
          }
        ],
        props: {
          // label: 'name',
          // children: 'children'
        }
      },
      treeNodeData: '', // 存当前数据
      treeNode: '', // 存当前节点信息
      contextMenuVisible: false, // 让菜单显示
      contextMenuTarget: null
    }
  },
  methods: {
    handleClose(done) { // 我添加的
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    selectFlow(a, b, c) {
      this.xinjian = true
      console.log('a', a)
      console.log('b', b)
      console.log('c', c)
    }, // 我添加的,不添加控制台会报错
    rightClick(e, data, node) {
      this.treeNodeData = data // 存当前数据
      this.treeNode = node // 存当前节点信息
      console.log('rightClick', this.treeNodeData, this.treeNode)
      this.contextMenuVisible = true // 让菜单显示
      console.log('0', e, '1', e.screenX, '2', e.screenY)
      const ele = document.querySelector('.right-menu')
      ele.style.position = 'fixed'
      ele.style.top = `${e.clientY}px`
      ele.style.left = `${e.clientX + 10}px` // 根据鼠标点击位置设置菜单出现
    },
    createDatabaseOrTable() {
      this.contextMenuVisible = false
      console.log('createDatabaseOrTable', this.treeNodeData, this.treeNode)
      this.dialogVisible = true // 我添加的 -打开弹窗
    },
    deleteDatabaseOrTable() {
      this.contextMenuVisible = false
      console.log('deleteDatabaseOrTable', this.treeNodeData, this.treeNode)
    }
  }
}
</script>

<style lang="scss" scoped>
// 下行代码会影响-弹窗样式,我关闭了
// #dataPage {
//   margin: 0 0;
//   text-align: center;
//   color: #2c3e50;
//   height: 100%;
// }
// 右键会选中文字，为了美观将它禁用
#el-tree {
  user-select: none;
}
.right-menu {
  font-size: 14px;
  position: fixed;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  z-index: 999;
  display: none;
}
.right-menu a {
  width: 150px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  color: #1a1a1a;
  padding: 2px;
}
.right-menu a:hover {
  background: #bbb;
  color: #fff;
}
.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}
a {
  text-decoration: none;
}
</style>