实现element动态获取当前行和当前列数据,和右键菜单

实现element动态获取当前行和当前列数据,和右键菜单

预览图

 

HTML

<template>
  <div @click.stop="rightMenuStatus = false">
    <el-table :data="datas" border ref="table" :reserve-selection="true">
      <el-table-column v-for="(col, index) in datas" :prop="col.id" :key="col.id" label="123">
        <template slot-scope="scope">
          <div @contextmenu.prevent="rightShow" @mouseenter="mouseenter($event, index, scope.$index)" style="padding: 10px 0px">123</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="rightMenu" v-if="rightMenuStatus" :style="{ top: position.y, left: position.x }">
      <div @click.stop>插入列(在左侧)</div>
      <div @click.stop="columnRigthAdd">插入列(在右侧)</div>
      <div @click.stop>插入行(在上)</div>
      <div @click.stop>插入行(在下)</div>
      <div @click.stop>删除当前行</div>
      <div @click.stop>删除当前列</div>
    </div>
  </div>
</template>

Script

<script>
export default {
  data() {
    return {
      rightMenuStatus: false,
      rowIndex: 0,
      columnIndex: 0,
      position: {
        y: 0,
        x: 0
      },
      datas: [
        {
          id: 'id1',
          a: 2,
          b: 2
        },
        {
          id: 'id2',
          a: 2,
          b: 2
        },
        {
          id: 'id3',
          a: 2,
          b: 2
        }
      ]
    }
  },
  methods: {
    //列右侧添加
    columnRigthAdd() {
      console.log(this.rowIndex)
      console.log(this.columnIndex)
      //业务写在这上面
      this.rightMenuStatus = false
    },
    //鼠标右键
    rightShow(e) {
      document.oncontextmenu = function () {
        return false
      }
      const x = e.clientX
      const y = e.clientY
      this.position.x = x + 'px'
      this.position.y = y + 'px'
      this.rightMenuStatus = true
      console.log(`在${this.rowIndex}行, ${this.columnIndex}列添加数据`)
    },
    //鼠标移入
    mouseenter(event, columnIndex, rowIndex) {
      // 拦截鼠标右键事件
      if (this.rightMenuStatus) {
        return
      } else {
        this.rowIndex = rowIndex
        this.columnIndex = columnIndex
      }
    }
  }
}
</script>

Scss

<style lang="scss" scoped>
//重置element table单元格自带的padding
::v-deep .el-table__cell {
  padding: 0px 0;
}
.rightMenu {
  color: rgb(28, 28, 28);
  padding: 5px;
  font-size: 14px;
  position: absolute;
  width: 140px;
  background: rgb(241, 241, 241);
  z-index: 999;
  box-shadow: 0px 0px 3px 0px rgb(0, 0, 0);
  & > div {
    padding: 5px 10px;
    cursor: pointer;
    border: solid 1px rgb(165, 165, 165);
    border-width: 0px 0px 1px 0px;
    //最后一行不显示边框
    &:last-child {
      border-width: 0px;
    }
    &:hover {
      background: rgb(221, 221, 221);
    }
  }
}
</style>