@vxe-ui/plugin-menu v4.0.7

@vxe-ui/plugin-menu

Vxe UI plug-in supports context menu.

Compatibility

It corresponds to vxe-table v4 or vxe-pc-ui v4

Installing

npm install @vxe-ui/plugin-menu

// ...
// Use vxe-pc-ui
import { VxeUI } from 'vxe-pc-ui'
// Use vxe-table
// import { VxeUI } from 'vxe-table'
import VxeUIPluginMenu from '@vxe-ui/plugin-menu'
// ...

VxeUI.use(VxeUIPluginMenu)

API

Context menu codes

Table Demo

<template>
  <vxe-table
    :data="tableData"
    :menu-config="menuConfig"
    :edit-config="{trigger: 'click', mode: 'cell'}">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
    <vxe-column field="sex" title="sex" :edit-render="{name: 'input'}"></vxe-column>
    <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 100,  name: 'test1', age: 28, sex: '1' },
        { id: 101,  name: 'test2', age: 32, sex: '0' },
        { id: 102,  name: 'test3', age: 36, sex: '1' }
      ],
      menuConfig: {
        body: {
          options: [
            [
              { code: 'EXPORT_ALL', name: '导出.csv' },
              { code: 'INSERT_EDIT_ROW', name: '新增' }
            ]
          ]
        }
      }
    }
  }
}
</script>

Contributors

Thank you to everyone who contributed to this project.

License

MIT © 2019-present, Xu Liangzhan