Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to suspend display data and right-click menu in vue table". In daily operation, I believe many people have doubts about how to suspend display data and right-click menu in vue table. I have consulted all kinds of information and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to suspend display data and right-click menu in vue table"! Next, please follow the small series to learn together!

floatingly displayed

This document exists, but it is easy to ignore, first look at the renderings

Mouse on which line, will pop up the corresponding description.

Read the code directly.

//column name and attribute name//retrieve from json data //suspend display data

Build Description: {{ scope.row.memberTxt }}

Created on: {{ scope.row.date2 }}

//row display data {{ scope.row.member }} //Delete button after data

Just these are enough, the table settings do not need to be changed, only when using the right-click menu will change;

right-click menu

This could have nothing to do with the previous one, or it could be the same one, depending on himself!

Still looking at the picture first.

右下角的菜单就是右键的菜单了;

我们来看具体实现：

首先就是表格的设置

文档中表格有这个事件，

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

这些@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，也就是右键菜单显示的内容了

设计信息 查看图纸 查看模型 修改信息

然后就是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; }到此，关于"vue在table表中怎么悬浮显示数据及右键菜单"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.