vue在table表中悬浮显示数据及右键菜单

本文实例为大家分享了vue在table表中悬浮显示数据及右键菜单的具体代码,供大家参考,具体内容如下

悬浮显示

这个文档里是存在的,但很容易被忽略,先看看效果图

鼠标放在哪行,就会弹出相对应的描述。

直接看代码

//列名及属性名
<el-table-column prop="member"  label="构件名称">
//从json数据调取
    <template slot-scope="scope">
    //悬浮显示数据
    <el-popover trigger="hover" placement="top" >
      <p>构建描述: {{ scope.row.memberTxt }}</p>
      <p>创建时间: {{ scope.row.date2 }}</p>
      <div slot="reference" class="name-wrapper">
      //行显示数据
        <el-tag size="medium" >
     {{ scope.row.member }}
     //数据后加删除按钮
     <el-button icon="el-icon-delete" type="text" class="red" @click="handleDelete(scope.$index,scope.row)">
     </el-button>
     </el-tag>

      </div>
    </el-popover>
    </template>
</el-table-column>

只是这些就足够了,表的设置无需做更改,用到右键菜单时才会更改;

右键菜单

这与上个可以没有关系,也可是同一个,取决于自己!
依旧是先看图

右下角的菜单就是右键的菜单了;
我们来看具体实现:
首先就是表格的设置
文档中表格有这个事件,

<el-table :data="tableData"
   type="expand"
   class="table" 
   ref="multipleTable" 
   header-cell-class-name="table-header"
   @row-contextmenu="rowContextmenu"//主要就是这个事件
   @selection-change="handleSelectionChange">

当然,在表格下面,还要写重要的一步

<context-button v-if="menuVisible" @foo="foo" ref="contextbutton"
     @handleOne="handleOne" @handleTwo="handleTwo" @handleThree="handleThree"
     @handleFour="handleFour" @handleFive="handleFive"></context-button>

这些@handle对应点击事件

接下来就是methods

rowContextmenu (row, column, event) {
            this.menuVisible = false
            this.menuVisible = true
            // 阻止右键默认行为
            event.preventDefault()
            this.$nextTick(() => {
              this.$refs.contextbutton.init(row,column,event)
        this.updForm = row;
            })
      
          },
          foo() { // 取消鼠标监听事件 菜单栏
            this.menuVisible = false
           /* document.removeEventListener('click', this.foo) */
          },
           handleTwo () {
        
        },
        handleThree () {
        
        },
  handleFour (){
   
        },
  handleFive (row){
  
  }

那些handle开头的方法是右键菜单的方法,我自己写的就不公布了,知道是点击按钮事件就可以了
重点,上面我们在表格下面写了神秘代码就要用到了
在你使用的vue界面的目录下创建一个“contextButton”文件夹,对应 上面的ref即可,注意大小写!
在文件夹下创建vue页面

首先是html,也就是右键菜单显示的内容了

<template>
  <div id="contextmenu" class="contextmenu">
    <div class="contextmenu__item" @click="handleTwo()">设计信息</div>
    <div class="contextmenu__item" @click="handleThree()">查看图纸</div>
  <div class="contextmenu__item" @click="handleFour()">查看模型</div>
   <div class="contextmenu__item" @click="handleFive()">修改信息</div>
  </div>
</template>

然后就是script

export default {
      name: "index",
      data () {
        return {
            collapse: false,                                                                                                                                                                                                                
    }
      },  methods: {
        init (row, column,event) {
         let menu = document.querySelector('#contextmenu')
          let cha = document.body.clientHeight - event.clientY
          console.log(document.body.clientHeight,event.clientY,cha)
          if (cha < 150) {
            menu.style.top = event.clientY -0 + 'px'
          } else {
            menu.style.top = event.clientY -60 + 'px'
          }
          menu.style.left = event.clientX - 200 + 'px'
             document.addEventListener('click', this.foo)
              },
        foo () {
          this.$emit('foo')
        },
         handleTwo () {
          this.$emit('handleTwo')
        },
        handleThree () {
          this.$emit('handleThree')
        },
  handleFour (){
   this.$emit('handleFour')
        },
  handleFive (row){
   this.$emit('handleFive')
  }
  }
    }

位置的话是随着你右键的不同位置二不同的
如果不喜欢这个位置,可以自己改变
最后就是样式了

 .contextmenu__item {
    display: block;
    line-height: 34px;
    text-align: center;
  }
   .contextmenu__item:not(:last-child) {
    border-bottom: 1px solid rgba(64,158,255,.2);
  }
  .contextmenu {
    position: absolute;
    background-color: #ecf5ff;
    width: 100px;  font-size: 12px;
    color: #409EFF;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: nowrap;
    z-index: 1000;
  }
  .contextmenu__item:hover {
    cursor: pointer;
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }

颜色什么的都是我喜欢的,不喜欢的话可以自己改变。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue添加自定义右键菜单的完整实例

    一.写原生方法 1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ... </li> 2.在页面编写右键菜单内容:

  • vue右键菜单的简单封装

    本文实例为大家分享了vue实现右键菜单封装的具体代码,供大家参考,具体内容如下 封装一个简单的右键菜单,要求右键处出现菜单,点击除了菜单部分可以关闭菜单. 组件 <template>   <div class="ContextMenu" @click="close" v-show="show">     <ul class="menuMain" ref="menuMain" :

  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • vue中自定义右键菜单插件

    前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造 本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下 演示 用法 通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({   components: {     VueContext

  • vue实现右键菜单栏

    本文实例为大家分享了vue实现右键菜单栏的具体代码,供大家参考,具体内容如下 vue实现右键菜单栏和原生js大同小异,都是需要明白两个点 1.contextmenu事件是鼠标的右键点击事件2.要阻止浏览器的默认右键事件 代码如下 // methods rightShow() {     let menu = this.$refs.msgRightMenu     this.isPersoncontextMenus = true     var evt = event || window.even

  • Vue el-table实现右键菜单功能

    本文实例为大家分享了Vue el-table实现右键菜单功能的具体代码,供大家参考,具体内容如下 实现的效果如下: 1.el-table和右键菜单视图代码 @row-contextmenu="rightClick"是右键点击事件 @row-click="clickTableRow"是每行单击事件 <el-table     border     :data="connectList"     @row-contextmenu="r

  • 原生Vue 实现右键菜单组件功能

    Vue 原生实现右键菜单组件, 零依赖 快速安装 npm install vue-contextmenujs 使用 测试中使用的是 element-ui 图标 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <template> <div id="app" style="width:100vw;height:100vh" @contextmenu

  • vue实现鼠标经过显示悬浮框效果

    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置 全部代码如下: <template>   <div class="hello">     <div id="focus_toolTip" class=&

  • vue原生方法自定义右键菜单

    本文实例为大家分享了vue原生方法自定义右键菜单的具体代码,供大家参考,具体内容如下 1.在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件) <div @contextmenu.prevent.native="openMenu($event)">   .... </div> 2.在页面编写右键菜单的内容 <ul v-show="visible" :style="{left:left+'p

  • vue实现自定义全局右键菜单

    前段时间公司在做一个webIDE项目,其中有对文件树的各种操作,主要通过右键菜单实现,今天就来记录一下怎么在vue项目中实现全局的自定义右键菜单.效果如图所示: 注意: 需要在项目中找到页面整体布局的组件,比如项目使用Home.vue作为整个项目的公共布局,将根元素定位设置成relative,使右键菜单相对于其进行定位. 本文的右键菜单主要使用vuex实现 一.vuex中定义全局状态用于管理右键菜单 export default {     /**      * menuContent格式:  

随机推荐