vue表格右键菜单

 

1.table上增加右键触发，并定义ref

<el-table v-loading="dataListLoading" :data="dataList" ref="dataTableRef" border stripe @row-contextmenu="contextMenuHandle"

                      @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">

 

2.设置菜单展示页面

    <!-- start 右键菜单 -->

    <div id="menu_mfDev" v-show="menuShow" style="display: flex;  position: absolute;  width: 160px;">

      <ul style="height: auto;width: auto;font-size: 14px;text-align: left;border-radius: 5px;border: none;color: #fff; list-style: none; padding: 5px 10px 5px 10px;">

        <li v-for="(item, index) in menuArr" :key="index" @click.stop="rowContextmenuClick(item.opt, item.rowid)" @mouseover="liHoverin" @mouseout="liHoverout"

            style="width: 160px;height: 40px;line-height: 40px;border-radius: 3px; padding-left: 5px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.47);">{{ item.name }}</li>

      </ul>

    </div>

    <!-- end -->

 

3.data的return 中增加菜单数据

  data () {

    return {

 

      /** 右键菜单 start **/

      menuShow: false,

      menuArr: [],

      /** end *************/

}

}

 

4.mounted设置取消右键菜单的方法

  mounted () {

    document.addEventListener('click', this.closeContextMenu)

  },

 

5.methods中增加右键菜单处理方法

 

    /** 右键菜单 ******************************************************************/

    closeContextMenu () {

      this.menuShow = false

      this.$nextTick(() => {

        this.$refs.dataTableRef.clearSelection()

      })

    },

    contextMenuHandle (row, column, e) {

      e.preventDefault()

 

      this.menuShow = true

      this.menuArr = [{ 'name': '编辑', 'opt': 'edit', 'rowid': row.id }, { 'name': '删除', 'opt': 'delete', 'rowid': row.id },

        { 'name': '更换口令', 'opt': 'keys', 'rowid': row.id }]

      if (row.black === '0') {

        this.menuArr.push({ 'name': '列入黑名单', 'opt': 'inBlack', 'rowid': row.id })

      } else if (row.black === '1') {

        this.menuArr.push({ 'name': '列出黑名单', 'opt': 'outBlack', 'rowid': row.id })

      }

      this.buildContextMenu(row, e, document.querySelector('#menu_mfDev'))

    },

    rowContextmenuClick (opt, rowid) {

      if (opt === 'edit') {

        this.addOrUpdateHandle(rowid)

      } else if (opt === 'delete') {

        this.deleteHandle(rowid)

      } else if (opt === 'upgrade') {

        this.upgrade(rowid)

      } else if (opt === 'keys') {

        this.changeKey(rowid)

      } else if (opt === 'inBlack') {

        this.blackList(rowid)

      } else if (opt === 'outBlack') {

        this.blackList(rowid)

      }

    },

    liHoverin (e) {

      e.target.style.backgroundColor = '#fff'

      e.target.style.color = 'red'

    },

    liHoverout (e) {

      e.target.style.removeProperty('background-color')

      e.target.style.removeProperty('color')

    },

    buildContextMenu (row, e, menu) {

      this.$refs.dataTableRef.clearSelection()

      this.$refs.dataTableRef.toggleRowSelection(row, true)

 

      menu.children[0].style.backgroundColor = 'blue'

 

      // 处理右键菜单位置

      let x = e.pageX

      let y = e.pageY

      let winHeight = window.innerHeight

      let menuHeight = menu.offsetHeight

 

      x = x - 220

      y = winHeight - menuHeight >= y ? y - 100 : y - menuHeight - 80

 

      menu.style.left = x + 'px'

      menu.style.top = y + 'px'

      menu.style.display = 'block'

      menu.style.zIndex = 1000

    }

    /** end ***********************************************************************/