Closed
Description
Version
1.18.4
Link to Minimal Reproduction
https://visactor.io/vtable/demo/interaction/context-menu
Steps to Reproduce
https://visactor.io/vtable/demo/interaction/context-menu
使用如下配置
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
.then(res => res.json())
.then(data => {
const columns = [
{
field: 'Order ID',
title: 'Order ID',
width: 'auto'
},
{
field: 'Customer ID',
title: 'Customer ID',
width: 'auto'
},
{
field: 'Product Name',
title: 'Product Name',
width: 'auto'
},
{
field: 'Category',
title: 'Category',
width: 'auto'
},
{
field: 'Sub-Category',
title: 'Sub-Category',
width: 'auto'
},
{
field: 'Region',
title: 'Region',
width: 'auto'
},
{
field: 'City',
title: 'City',
width: 'auto'
},
{
field: 'Order Date',
title: 'Order Date',
width: 'auto'
},
{
field: 'Quantity',
title: 'Quantity',
width: 'auto'
},
{
field: 'Sales',
title: 'Sales',
width: 'auto'
},
{
field: 'Profit',
title: 'Profit',
width: 'auto'
}
];
const option = {
records: data,
columns,
widthMode: 'standard',
menu: {
contextMenuItems: [
{
text: '复制',
type: 'item',
menuKey: 'copy',
},
{
text: '备注',
type: 'item',
menuKey: '备注',
children: [
{
text: '设置备注',
type: 'item',
menuKey: 'setRemark',
},
{
text: '清除备注',
type: 'item',
menuKey: 'clearRemark',
},
],
},
{
text: '修改单元格样式',
type: 'item',
menuKey: '修改单元格样式',
children: [
{
text: '修改单元格背景颜色',
type: 'title',
menuKey: '修改单元格背景颜色',
},
{
text: '灰色',
type: 'item',
menuKey: 35,
},
{
text: '浅橘黄',
type: 'item',
menuKey: 36,
},
{
type: 'split',
},
{
text: '修改单元格字体颜色',
type: 'title',
menuKey: '修改单元格字体颜色',
},
{
text: '红色',
type: 'item',
menuKey: 43,
},
{
type: 'split',
},
{
text: '清除单元格样式',
type: 'item',
menuKey: 8,
},
],
},
{
text: '修改行样式',
type: 'item',
menuKey: '修改行样式',
children: [
{
text: '修改本行背景颜色',
type: 'title',
menuKey: '修改本行背景颜色',
},
{
text: '灰色',
type: 'item',
menuKey: 55,
},
{
text: '浅橘黄',
type: 'item',
menuKey: 56,
},
{
type: 'split',
},
{
text: '修改本行字体颜色',
type: 'title',
menuKey: '修改本行字体颜色',
},
{
text: '红色',
type: 'item',
menuKey: 63,
},
{
type: 'split',
},
{
text: '清除本行样式',
type: 'item',
menuKey: 7,
},
],
},
]
}
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window['tableInstance'] = tableInstance;
let copyData;
tableInstance.on('dropdown_menu_click', args => {
console.log('dropdown_menu_click', args);
if (args.menuKey === 'copy') {
copyData = tableInstance.getCopyValue();
} else if (args.menuKey === 'paste') {
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 === 'delete') {
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;
}
});
Current Behavior
Expected Behavior
二级菜单能够出现在 表格区域内部
Environment
- OS: Ubuntu
- Browser: Chrome
- Framework:Any additional comments?
No response