Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

vxe-table-plugin-menus

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vxe-table-plugin-menus

基于 vxe-table 的表格插件,提供实用的快捷菜单集


Version published
Weekly downloads
327
decreased by-41.29%
Maintainers
1
Weekly downloads
 
Created

vxe-table-plugin-menus

gitee star npm version npm downloads npm license

基于 vxe-table 的表格插件,提供实用的快捷菜单集

Installing

npm install xe-utils vxe-table@next vxe-table-plugin-menus@next
// ...
import VXETable from 'vxe-table'
import VXETablePluginMenus from 'vxe-table-plugin-menus'
// ...

VXETable.use(VXETablePluginMenus)

// Enable copy
/*
import XEClipboard from 'xe-clipboard'

VXETable.use(VXETablePluginMenus, {
  // 自定义处理函数,该示例使用 xe-clipboard 演示
  // copy (text) {
  //   // ...
  // }
  copy: XEClipboard.copy
})
*/

API

Context menu codes

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_ACTIVED_ROW插入数据并激活编辑状态Array<records, field>
INSERT_AT_ROW插入数据到指定位置records
INSERT_AT_ACTIVED_ROW插入数据到指定位置并激活编辑状态Array<records, field>
DELETE_ROW移除行数据
DELETE_CHECKBOX_ROW移除复选框选中行数据
DELETE_ALL移除所有行数据
CLEAR_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重置列的所有状态

demo

<vxe-table
  :data="tableData"
  :context-menu="{body: {options: bodyMenus}}"
  :edit-config="{trigger: 'click', mode: 'cell'}">
  <vxe-table-column type="index" width="60"></vxe-table-column>
  <vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
  <vxe-table-column field="sex" title="sex" :edit-render="{name: 'input'}"></vxe-table-column>
  <vxe-table-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-table-column>
</vxe-table>
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' }
      ],
      bodyMenus: [
        [
          { code: 'EXPORT_ALL', name: '导出.csv' },
          { code: 'INSERT_ACTIVED_ROW', name: '新增' }
        ]
      ]
    }
  }
}

License

MIT © 2019-present, Xu Liangzhan

FAQs

Package last updated on 08 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts