VTable怎么通过右键菜单来实现复制粘贴删除单元格能力？VTable通过右键菜单来实现复制粘贴删除单元格能力。监听事件

问题描述

目前支持ctrl+c复制，ctrl+v粘贴。而在我们的项目需求中期望通过右键菜单然后复制或粘贴以及删除单元格的值，不知道怎么去实现这个能力。

解决方案

监听事件dropdown_menu_click来判断点击的菜单项。

通过vtable的接口getCopyValue 获取需要复制的内容，粘贴到表格时调研接口changeCellValues 将值设置到单元格中。

删除所选内容需要通过接口getSelectedCellInfos来获取选中的单元格，然后逐个单元格单元接口changeCellValue来赋值为空。

代码示例

const option = {
  menu: {
    contextMenuItems: ['复制单元格内容', '粘贴', '删除', '...']
  }
  ...
}

const tableInstance = new VTable.ListTable(container, option);

    let copyData;
    tableInstance.on('dropdown_menu_click', args => {
      console.log('dropdown_menu_click', args);
      if (args.menuKey === '复制单元格内容') {
        copyData = tableInstance.getCopyValue();
      } else if (args.menuKey === '粘贴') {
        const rows = copyData.split('\n'); // 将数据拆分为行
        const values = [];
        rows.forEach(function (rowCells, rowIndex) {
          const cells = rowCells.split('\t'); // 将行数据拆分为单元格
          const rowValues = [];
          values.push(rowValues);
          cells.forEach(function (cell, cellIndex) {
            // 去掉单元格数据末尾的 '\r'
            if (cellIndex === cells.length - 1) {
              cell = cell.trim();
            }
            rowValues.push(cell);
          });
        });
        tableInstance.changeCellValues(args.col, args.row, values);
      } else if (args.menuKey === '删除') {
        let selectCells = tableInstance.getSelectedCellInfos();
        if (selectCells?.length > 0 && cellIsSelectRange(args.col, args.row, selectCells)) {
          // 如果选中的是范围，则删除范围内的所有单元格
          deleteSelectRange(selectCells);
        } else {
          // 否则只删除单个单元格
          tableInstance.changeCellValue(args.col, args.row, '');
        }
      }
    });
    //将选中单元格的值设置为空
    function deleteSelectRange(selectCells) {
      for (let i = 0; i < selectCells.length; i++) {
        for (let j = 0; j < selectCells[i].length; j++) {
          tableInstance.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, '');
        }
      }
    }
    // 判断单元格col,row是否在选中范围中
    function cellIsSelectRange(col, row, selectCells) {
      for (let i = 0; i < selectCells.length; i++) {
        for (let j = 0; j < selectCells[i].length; j++) {
          if (selectCells[i][j].col === col && selectCells[i][j].row === row) {
            return true;
          }
        }
      }
      return false;
    }
  });

结果展示

在线效果参考：visactor.io/vtable/demo…

VTable怎么通过右键菜单来实现复制粘贴删除单元格能力？

问题描述

解决方案

代码示例

结果展示

相关文档