vue vxe ui vxe-table 使用右键菜单可复用配置化

自由的云h
1,125 阅读6分钟

官网文档：vxetable.cn 分享项目中比较常使用的右键菜单配置，在 vxe-table 使用右键菜单式非常简单的。几行配置就可以实现很强大，支持任意扩展的需求。 vxe-grid 是 vxe-table 高级表格，这里代码只使用 vxe-grid 。

常规配置使用

菜单由 menu-config 参数配置（分为 header、body、footer 三个部分） ： 例如

const menuConfig = {
    body: {
    	// 二维数组
    	options: [
    		[
    			// 如果还有二级菜单，通过 children 配置
    			{ code: '唯一编码', name: '菜单名称'， children: [] }
			]
		]
    }
}

基本上所有菜单的逻辑都是使用 code 配置进行实现的。 menu-click 事件，当点击右键菜单时就会触发，接受参数 { menu } ，其中 menu 就是自己配置的选项

{C4B85A79-A28B-41D7-B705-BCE7EDA491F0}.png

<template>
  <div>
    <vxe-grid v-bind="gridOptions" @menu-click="menuClickEvent"></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      showFooter: true,
      columns: [
        { field: 'checkbox', type: 'checkbox', width: 50 },
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name' },
        { field: 'nickname', title: 'Nickname' },
        { field: 'age', title: 'Age' },
        { field: 'role', title: 'Role' },
        { field: 'address', title: 'Address', showOverflow: true }
      ],
      data: [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
      ],
      menuConfig: {
        header: {
          options: [
            [
              { code: 'custom1', name: '自定义前缀图标', suffixConfig: { icon: 'vxe-icon-download' } },
              { code: 'custom2', name: '自定义前缀内容', suffixConfig: { content: 'Ctrl+S' } }
            ]
          ]
        },
        body: {
          options: [
            [
              { code: 'custom3', name: '自定义前缀图标', suffixConfig: { icon: 'vxe-icon-download' } },
              { code: 'custom4', name: '自定义前缀内容', suffixConfig: { content: 'Ctrl+S' } }
            ],
            [
              {
                code: 'custom5',
                name: '二级菜单',
                children: [
                  { code: 'custom6', name: '自定义前缀图标', suffixConfig: { icon: 'vxe-icon-download' } },
                  { code: 'custom7', name: '自定义前缀内容', suffixConfig: { content: 'Ctrl+S' } }
                ]
              }
            ]
          ]
        },
        footer: {
          options: [
            [
              { code: 'custom8', name: '前缀图标', suffixConfig: { icon: 'vxe-icon-download' } },
              { code: 'custom9', name: '前缀内容', suffixConfig: { content: 'Ctrl+S' } }
            ]
          ]
        }
      },
      footerData: [
        { checkbox: '合计', age: 135 }
      ]
    }
    return {
      gridOptions
    }
  },
  methods: {
    menuClickEvent ({ menu }) {
      console.log(`点击了 ${menu.code} 选项`)
    }
  }
}
</script>

插件用法

了解基本用法之后，就可以使用插件来简化常用配置，插件提供了丰富的内置 code，只需要配置一下就可以完成使用，极大减少项目中重复代码。

这个就需要用到官方的扩展插件 plugin-menu， 插件的 gitee 地址 plugin-menu

npm install vxe-pc-ui@4.2.19 vxe-table@4.7.87 @vxe-ui/plugin-menu@4.0.2

{E6957AA4-D6FF-4E7E-84F7-E7A175D042A2}.png

{4558A858-9D70-4AD7-B2AB-D6F30A23A634}.png

{B827EFD4-CE20-4D75-8866-38804C023FA1}.png

{287EFAE4-B944-4C79-A077-56029A58A890}.png

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      showOverflow: true,
      showFooter: true,
      keepSource: true,
      mouseConfig: {
        selected: true
      },
      editConfig: {
        trigger: 'dblclick',
        mode: 'cell',
        showStatus: true
      },
      columns: [
        { field: 'checkbox', type: 'checkbox', width: 50 },
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', editRender: { name: 'input' } },
        { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
        { field: 'age', title: 'Age', editRender: { name: 'input' } },
        { field: 'role', title: 'Role', sortable: true },
        { field: 'address', title: 'Address', sortable: true }
      ],
      data: [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
      ],
      menuConfig: {
        header: {
          options: [
            [
              { code: 'HIDDEN_COLUMN', name: '隐藏列' },
              { code: 'CLEAR_SORT', name: '清除排序' },
              { code: 'RESET_COLUMN', name: '重置自定义列' }
            ]
          ]
        },
        body: {
          options: [
            [
              { code: 'CLEAR_CELL', name: '清除值' },
              { code: 'REVERT_CELL', name: '还原值' }
            ],
            [
              {
                name: '排序',
                children: [
                  { code: 'SORT_ASC', name: '升序' },
                  { code: 'SORT_DESC', name: '倒序' },
                  { code: 'CLEAR_SORT', name: '清除当前列排序' },
                  { code: 'CLEAR_ALL_SORT', name: '清除所有列排序' }
                ]
              }
            ],
            [
              {
                name: '打印',
                prefixConfig: {
                  icon: 'vxe-icon-print'
                },
                children: [
                  { code: 'PRINT_CHECKBOX_ROW', name: '打印选中' },
                  { code: 'PRINT_ALL', name: '打印全部', suffixConfig: { content: 'Ctrl+P' } }
                ]
              }
            ],
            [
              { code: 'EXPORT_ROW', name: '导出当前行.csv', prefixConfig: { icon: 'vxe-icon-download' } },
              { code: 'EXPORT_ALL', name: '导出全部数据.csv', prefixConfig: { icon: 'vxe-icon-download' } }
            ]
          ]
        },
        footer: {
          options: [
            [
              { code: 'EXPORT_ALL', name: '导出全部数据.csv', prefixConfig: { icon: 'vxe-icon-download' } }
            ]
          ]
        }
      },
      footerData: [
        { checkbox: '合计', age: 135 }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

这样就可以非常简单的配置便捷的菜单。

以下是官网的内置 code，具体以官网最新的为主

低版本可能没那么全，我这里是用 vxe-table 4.7+ 最新版本

以下是照搬官网的，具体看官网就行 gitee.com/x-extends/v…

code 编码describe 描述params 参数
CLEAR_CELL清除单元格数据的值；如果启用 mouse-config.area 功能，则清除区域范围内的单元格数据—
CLEAR_ROW清除行数据的值—
CLEAR_CHECKBOX_ROW清除复选框选中行数据的值—
CLEAR_ALL清除所有数据的值—
REVERT_CELL还原单元格数据的值；如果启用 mouse-config.area 功能，则还原区域范围内的单元格数据—
REVERT_ROW还原行数据的值—
REVERT_CHECKBOX_ROW还原复选框选中行数据的值—
REVERT_ALL还原所有数据的值—
MERGE_OR_CLEAR如果启用 mouse-config.area 功能，如果所选区域内已存在合并单元格，则取消临时合并，否则临时合并—
MERGE_CELL如果启用 mouse-config.area 功能，临时合并区域范围内的单元格，不管是否存在已合并—
CLEAR_MERGE_CELL如果启用 mouse-config.area 功能，清除区域范围内单元格的临时合并状态—
CLEAR_ALL_MERGE清除所有单元格及表尾的临时合并状态—
COPY_CELL复制单元格数据的值；如果启用 mouse-config.area 功能，则复制区域范围内的单元格数据，支持 Excel 和 WPS—
CUT_CELL剪贴单元格数据的值；如果启用 mouse-config.area 功能，则剪贴区域范围内的单元格数据，支持 Excel 和 WPS—
PASTE_CELL（仅支持在单表区域内操作）粘贴从表格中被复制的数据；如果启用 mouse-config.area 功能，则粘贴区域范围内的单元格数据，不支持读取剪贴板—
EDIT_CELL编辑选中单元格—
EDIT_ROW编辑选中行并激活选中单元格—
INSERT_ROW插入数据records
INSERT_EDIT_ROW插入数据并激活编辑状态Array<records, field>
INSERT_AT_ROW插入数据到指定位置records
INSERT_AT_EDIT_ROW插入数据到指定位置并激活编辑状态Array<records, field>
DELETE_ROW移除行数据—
DELETE_AREA_ROW如果启用 mouse-config.area 功能，移除所选区域行数据—
DELETE_CHECKBOX_ROW移除复选框选中行数据—
DELETE_ALL移除所有行数据—
CLEAR_SORT清除所选列排序条件—
CLEAR_ALL_SORT清除所有排序条件—
SORT_ASC按所选列的值升序—
SORT_DESC按所选列的值倒序—
CLEAR_FILTER清除选中列的筛选条件—
CLEAR_ALL_FILTER清除所有列筛选条件—
FILTER_CELL根据单元格值筛选—
EXPORT_ROW导出行数据options
EXPORT_CHECKBOX_ROW导出复选框选中行数据options
EXPORT_ALL导出所有行数据options
PRINT_ALL打印所有行数据options
PRINT_CHECKBOX_ROW打印复选框选中行options
OPEN_FIND如果启用 mouse-config.area 功能，打开单元格查找功能—
OPEN_REPLACE如果启用 mouse-config.area 功能，打开单元格替换功能—
FIXED_LEFT_COLUMN将列固定到左侧—
FIXED_RIGHT_COLUMN将列固定到右侧—
CLEAR_FIXED_COLUMN清除固定列—
HIDDEN_COLUMN隐藏当前列—
RESET_COLUMN重置列的可视状态—
RESET_RESIZABLE重置列宽状态—
RESET_ALL重置列的所有状态—
avatar
文章
阅读
粉丝