v-contextmenu table菜单点击

接上一条使用v-contextmenu右键定义菜单的随笔（百度来的同学请看我的主页另外一篇安装v-contextmenu的博客，再看这个，老手请忽略），后面我发现这个插件在处理表格的时候还是需要点动点手脚的，这次还是用的官方API
table表格如下

<template>
  <div class="common-box">
    <el-table
      :data="data"
      style="width: 100%">
      <el-table-column
        prop="text"
        label="标题"
        width="width">
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" header-align="center">
        <template slot-scope="rows">
          <!-- 赋值ID -->
          <div class="menu" v-contextmenu:contextmenu :pid="rows.row.id">
            <p style="cursor: pointer;">操作</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="v-contextmenu">
      <!-- 右键时触发写入ID事件 -->
      <v-contextmenu ref="contextmenu" @contextmenu="thisPid">
        <!-- 点击时触发相应的操作 -->
        <v-contextmenu-item @click="menu1">菜单1</v-contextmenu-item>
        <v-contextmenu-item>菜单2</v-contextmenu-item>
        <v-contextmenu-submenu title="菜单3">
          <v-contextmenu-item @click="menu(item)">菜单3-1</v-contextmenu-item>
        </v-contextmenu-submenu>
      </v-contextmenu>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          text: '内容'
        }
      ],
      cid: null
    }
  },
  methods: {
    thisPid (vm) {
      // 绑定到data
      this.cid = vm.data.attrs.pid
      console.log(this.cid)
    },
    menu1 () {
      // 获取绑定的ID值
      console.log('要操作的ID：' + this.cid)
    }
  },
  mounted () {

  }
}
</script>

<style lang='less' scoped>
</style>

一个页面使用多个v-contextmenu的话，在v-contextmenu:contextmenu这里替换成自定义的值，例如v-contextmenu:test，然后在ref中使用test即可。

标签：菜单,cid,contextmenu,vm,table,data
来源： https://www.cnblogs.com/xfstu/p/16449153.html