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

這篇文章主要介紹“vue在table表中怎么懸浮顯示數(shù)據(jù)及右鍵菜單”，在日常操作中，相信很多人在vue在table表中怎么懸浮顯示數(shù)據(jù)及右鍵菜單問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue在table表中怎么懸浮顯示數(shù)據(jù)及右鍵菜單”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

懸浮顯示

這個(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è)置無需做更改，用到右鍵菜單時(shí)才會(huì)更改；

右鍵菜單

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

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

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

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

<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)擊事件

接下來就是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)聽事件 菜單欄
            this.menuVisible = false
           /* document.removeEventListener('click', this.foo) */
          },
           handleTwo () {
        
        },
        handleThree () {
        
        },
  handleFour (){
   
        },
  handleFive (row){
  
  }

那些handle開頭的方法是右鍵菜單的方法，我自己寫的就不公布了，知道是點(diǎn)擊按鈕事件就可以了
重點(diǎn)，上面我們?cè)诒砀裣旅鎸懥松衩卮a就要用到了
在你使用的vue界面的目錄下創(chuàng)建一個(gè)“contextButton”文件夾，對(duì)應(yīng) 上面的ref即可，注意大小寫！
在文件夾下創(chuàng)建vue頁面
首先是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;
  }

到此，關(guān)于“vue在table表中怎么懸浮顯示數(shù)據(jù)及右鍵菜單”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！