# Vue element admin
https://www.one-tab.com/page/eU8mj-hpRcKIhbEV8lPBNw
add table 可選擇刪除

<template>
  <div class="app-container">
    <el-table
      oncontextmenu="return false"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @cell-mouse-enter="openDetails"
      @row-contextmenu="showmenu($row,$event, { name: item, index })"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">{{ scope.$index }}</template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.pageviews }}</template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>

    <vue-context ref="menu">
      <template slot-scope="child" v-if="child.data">
        <li>
          <a class="textder" href="#" @click.prevent="alertName(child.data.name)">Alert name</a>
        </li>
        <li>
          <a
            class="textder"
            href="#"
            @click.prevent="remove(child.data.index)"
          >Delete "{{ child.data.name }}"</a>
        </li>
      </template>
      <span>{{ result1 }}</span>
    </vue-context>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { VueContext } from "vue-context";
export default {
  components: { VueContext },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  computed: {
    showReset() {
      return this.items.length < items.length;
    }
  },

  data() {
    return {
      testdata: null,
      result1: null,
      result2: null,
      list: null,
      listLoading: true
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then(response => {
        this.list = response.data.items;
        this.listLoading = false;
      });
    },
    alertName(name) {
      // event.preventDefault();
      // var x = event.clientX;
      // var y = event.clientY;

      // this.$refs.menu.positionMenu(x, y);
      // console.log(x, y);
      alert(`You clicked on "${this.testdata.title}"!`);
      // alert(`You clicked on "${name}"!`);
    },

    remove(index) {
      this.$delete(this.items, index);
    },

    reset() {
      this.items = [...items];
    },
    mouseIsMoving(e) {
      var x = e.pageX;
      var y = e.pageY;

      this.result1 = x;
      this.result2 = y;
    },
    showmenu(row, event, data) {
      this.$refs.menu.data = data;
      this.$refs.menu.show = true;

      this.$refs.menu.$nextTick(() => {
        this.$refs.menu.positionMenu(this.result2, this.result1);

        this.$refs.menu.$el.focus();
        this.$refs.menu.setItemRoles();

        if (this.$refs.menu.closeOnScroll) {
          this.$refs.menu.addScrollEventListener();
        }

        this.$refs.menu.$emit("open", event, this.data, this.top, this.left);
      });

      //alert(this.result1 + "," + this.result2);
    },
    openDetails(row, column, cell, event) {
      this.testdata = row;
      console.log(row);
    }
  },
  mounted() {
    window.addEventListener("mousemove", this.mouseIsMoving);
  }, //mounted

  destroyed: function() {
    window.removeEventListener("mousemove", this.mouseIsMoving);
  }
};
</script>

客製化表格 新增 右鍵選單功能