vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單

更新時(shí)間：2022年04月11日 08:54:44 作者：她的大頭

這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下

懸浮顯示

這個(gè)文檔里是存在的，但很容易被忽略，先看看效果圖

鼠標(biāo)放在哪行，就會(huì)彈出相對(duì)應(yīng)的描述。

直接看代碼

//列名及屬性名
<el-table-column prop="member" ?label="構(gòu)件名稱">
//從json數(shù)據(jù)調(diào)取
? ? <template slot-scope="scope">
? ? //懸浮顯示數(shù)據(jù)
? ? <el-popover trigger="hover" placement="top" >
? ? ? <p>構(gòu)建描述: {{ scope.row.memberTxt }}</p>
? ? ? <p>創(chuàng)建時(shí)間: {{ scope.row.date2 }}</p>
? ? ? <div slot="reference" class="name-wrapper">
? ? ? //行顯示數(shù)據(jù)
? ? ? ? <el-tag size="medium" >
? ? ?{{ scope.row.member }}
? ? ?//數(shù)據(jù)后加刪除按鈕
? ? ?<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>

只是這些就足夠了，表的設(shè)置無(wú)需做更改，用到右鍵菜單時(shí)才會(huì)更改；

右鍵菜單

這與上個(gè)可以沒(méi)有關(guān)系，也可是同一個(gè)，取決于自己！
依舊是先看圖

右下角的菜單就是右鍵的菜單了；
我們來(lái)看具體實(shí)現(xiàn)：
首先就是表格的設(shè)置
文檔中表格有這個(gè)事件，

<el-table :data="tableData"
? ?type="expand"
? ?class="table"?
? ?ref="multipleTable"?
? ?header-cell-class-name="table-header"
? ?@row-contextmenu="rowContextmenu"http://主要就是這個(gè)事件
? ?@selection-change="handleSelectionChange">

當(dāng)然，在表格下面，還要寫(xiě)重要的一步

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

這些@handle對(duì)應(yīng)點(diǎn)擊事件

接下來(lái)就是methods

rowContextmenu (row, column, event) {
? ? ? ? ? ? this.menuVisible = false
? ? ? ? ? ? this.menuVisible = true
? ? ? ? ? ? // 阻止右鍵默認(rèn)行為
? ? ? ? ? ? event.preventDefault()
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? this.$refs.contextbutton.init(row,column,event)
? ? ? ? this.updForm = row;
? ? ? ? ? ? })
? ? ??
? ? ? ? ? },
? ? ? ? ? foo() { // 取消鼠標(biāo)監(jiān)聽(tīng)事件 菜單欄
? ? ? ? ? ? this.menuVisible = false
? ? ? ? ? ?/* document.removeEventListener('click', this.foo) */
? ? ? ? ? },
? ? ? ? ? ?handleTwo () {
? ? ? ??
? ? ? ? },
? ? ? ? handleThree () {
? ? ? ??
? ? ? ? },
? handleFour (){
? ?
? ? ? ? },
? handleFive (row){
??
? }

那些handle開(kāi)頭的方法是右鍵菜單的方法，我自己寫(xiě)的就不公布了，知道是點(diǎn)擊按鈕事件就可以了
重點(diǎn)，上面我們?cè)诒砀裣旅鎸?xiě)了神秘代碼就要用到了
在你使用的vue界面的目錄下創(chuàng)建一個(gè)“contextButton”文件夾，對(duì)應(yīng) 上面的ref即可，注意大小寫(xiě)！
在文件夾下創(chuàng)建vue頁(yè)面
首先是html，也就是右鍵菜單顯示的內(nèi)容了

<template>
? <div id="contextmenu" class="contextmenu">
? ? <div class="contextmenu__item" @click="handleTwo()">設(shè)計(jì)信息</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')
? }
? }
? ? }

位置的話是隨著你右鍵的不同位置二不同的
如果不喜歡這個(gè)位置，可以自己改變
最后就是樣式了

?.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;
? }

顏色什么的都是我喜歡的，不喜歡的話可以自己改變。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: