vue vxe ui vxe-table 使用右键菜单详解

官网文档：https://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 就是自己配置的选项
在这里插入图片描述

<template><div><vxe-gridv-bind="gridOptions"@menu-click="menuClickEvent"></vxe-grid></div></template><script>exportdefault{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 [email protected] [email protected] @vxe-ui/[email protected]

在这里插入图片描述

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><script>exportdefault{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+ 最新版本

以下是照搬官网的，具体看官网就行 https://gitee.com/x-extends/vxe-ui-plugins/tree/main/plugin-menu
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插入数据recordsINSERT_EDIT_ROW插入数据并激活编辑状态Array<records, field>INSERT_AT_ROW插入数据到指定位置recordsINSERT_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导出行数据optionsEXPORT_CHECKBOX_ROW导出复选框选中行数据optionsEXPORT_ALL导出所有行数据optionsPRINT_ALL打印所有行数据optionsPRINT_CHECKBOX_ROW打印复选框选中行optionsOPEN_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重置列的所有状态—

标签： vue.js ui javascript

本文转载自: https://blog.csdn.net/chenhdowue/article/details/142860136
版权归原作者 chenhdowue 所有，如有侵权，请联系我们删除。

vue vxe ui vxe-table 使用右键菜单详解

常规配置使用

插件用法

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

发表评论

“vue vxe ui vxe-table 使用右键菜单详解”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航