Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

Ant Design 是一套基于 Vue 的 UI 组件库，提供了大量的高质量组件，其中就包括了 Table 表格组件。

Table 组件非常常见，但是在实际开发中，有时我们需要在表格的行内右键菜单中添加一些自定义操作，例如删除、编辑等。本篇文章就将介绍如何在 Vue 中使用 Ant Design 的 Table 组件，并且实现行内右键菜单。

## Step 1. 安装 Ant Design 和 axios

首先，我们需要使用 npm 安装 Ant Design 和 axios。

npm install ant-design-vue --save

Ant Design 的 Table 组件需要用到样式文件，因此我们同时也需要安装相关的样式文件。

npm install antd --save

另外，我们还需要使用 axios 进行数据获取和提交操作。我们也需要先安装 axios。

npm install axios --save

## Step 2. 引入 Ant Design 和样式文件

在 main.js 文件中引入 Ant Design，并且全局注册相应的组件和样式文件。

import Vue from 'vue'
import { Table, Menu, Modal, message } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App'
import axios from 'axios'

Vue.prototype.$http = axios
Vue.prototype.$message = message
Vue.use(Table)
Vue.use(Menu)
Vue.use(Modal)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

## Step 3. 使用 Table 组件

在需要使用 Table 组件的组件中，我们可以直接使用 Table 组件。以下是一个简单的示例，展示如何在 Table 中显示数据。

<template>
  <Table :columns="columns"
         :dataSource="dataSource"
         :rowKey="record => record.id"
         @row-contextmenu="handleMenuShow"
         @contextmenu.prevent>
  </Table>
</template>

<script>
export default {
  name: 'TableDemo',
  data() {
    return {
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '年龄', dataIndex: 'age', key: 'age' },
        { title: '性别', dataIndex: 'gender', key: 'gender' },
        { title: '操作', key: 'action', width: 180, render: (text, record) => (
          <span>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </span>
        )}
      ],
      dataSource: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.$http.get('/api/users').then(response => {
        this.dataSource = response.data
      })
    },
    handleEdit(record) {
      Modal.confirm({
        title: 编辑${record.name},
        content: '请填写修改内容',
        onOk: () => {
          // 提交修改数据
        }
      })
    },
    handleDelete(record) {
      Modal.confirm({
        title: 删除${record.name},
        content: '确认要删除吗？',
        onOk: () => {
          this.$http.delete(/api/users/${record.id}).then(() => {
            this.loadData()
            this.$message.success('删除成功')
          })
        }
      })
    },
    handleMenuShow(event, record) {
      const menu = (
        <Menu>
          <Menu.Item>
            <a onClick={() => this.handleEdit(record)}>编辑</a>
          </Menu.Item>
          <Menu.Item danger>
            <a onClick={() => this.handleDelete(record)}>删除</a>
          </Menu.Item>
        </Menu>
      )

      Modal.confirm({
        title: 操作${record.name},
        content: menu,
        okButtonProps: {
          style: {
            display: 'none'
          }
        },
        cancelButtonProps: {
          style: {
            display: 'none'
          }
        }
      })
    }
  }
}
</script>

可以看到，我们在 Table 组件中定义了 columns 和 dataSource，用于显示数据和列信息。在列信息中，我们还添加了自定义操作列，其中包括编辑和删除两个操作。当用户点击这两个操作时，我们将弹出一个确认框，让用户选择是否继续进行该操作。

## Step 4. 实现行内右键菜单

通过第三步，我们已经实现了 table 并添加了删除和编辑两个操作。但是这种方法只能通过点击链接来进行操作，用户体验不是很好。因此，我们可以使用行内右键菜单来实现更好的用户体验。

为了实现行内右键菜单，我们需要在 Table 组件中添加一个事件监听器，当用户在某一个行上右键点击时触发，同时我们需要阻止默认右键菜单的弹出。然后，我们将弹出一个菜单，菜单里面包含了需要的操作。当用户选择某一个操作时，我们就可以进行相应的处理。

在第三步的示例中，我们就是通过在 Table 组件上添加 @row-contextmenu 事件监听器来实现行内右键菜单的。当用户在一个行上右键点击时，我们将弹出一个菜单，让用户选择要进行的操作。

<Table :columns="columns"
       :dataSource="dataSource"
       :rowKey="record => record.id"
       @row-contextmenu="handleMenuShow"
       @contextmenu.prevent>
</Table>

其中，@contextmenu.prevent 用于阻止默认的右键菜单弹出。handleMenuShow(event, record) 就是我们自定义的函数，用于处理右键弹出菜单的逻辑。在该函数中，我们首先定义了一个包含两个菜单项的菜单，然后将其添加到 Modal 确认框中，最后弹出提示框并显示菜单。

handleMenuShow(event, record) {
  const menu = (
    <Menu>
      <Menu.Item>
        <a onClick={() => this.handleEdit(record)}>编辑</a>
      </Menu.Item>
      <Menu.Item danger>
        <a onClick={() => this.handleDelete(record)}>删除</a>
      </Menu.Item>
    </Menu>
  )

  Modal.confirm({
    title: 操作${record.name},
    content: menu,
    okButtonProps: {
      style: {
        display: 'none'
      }
    },
    cancelButtonProps: {
      style: {
        display: 'none'
      }
    }
  })
}

## 小结

通过上面的代码示例，我们可以看到如何在 Vue 中使用 Ant Design 的 Table 组件，并且实现行内右键菜单。通过这种方式来进行操作，可以让用户更方便地对表格进行操作，提高用户的体验感。