[Bug] 聚合栏type为AggregationType.CUSTOM,结束编辑状态后未更新
@kapeter is already working on this.
Since Oct 29, 2024.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
1.10.0
Link to Minimal Reproduction
1.10.0
Steps to Reproduce
`
let tableInstance;
// 使用时需要引入插件包@visactor/vtable-editors
// import * as VTable_editors from '@visactor/vtable-editors';
// 正常使用方式 const input_editor = new VTable.editors.InputEditor();
// 官网编辑器中将 VTable.editors重命名成了VTable_editors
const input_editor = new VTable_editors.InputEditor();
const date_input_editor = new VTable_editors.DateInputEditor();
const list_editor = new VTable_editors.ListEditor({ values: ['girl', 'boy'] });
const textArea_editor = new VTable_editors.TextAreaEditor({ readonly: false });
VTable.register.editor('input-editor', input_editor);
VTable.register.editor('date-input-editor', date_input_editor);
VTable.register.editor('textArea-editor', textArea_editor);
function generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function generateRandomHobbies() {
const hobbies = [
'Reading books',
'Playing video games',
'Watching movies',
'Cooking',
'Hiking',
'Traveling',
'Photography',
'Playing \n musical /n instruments',
'Gardening',
'Painting',
'Writing',
'Swimming'
];
const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
const selectedHobbies = [];
for (let i = 0; i < numHobbies; i++) {
const randomIndex = Math.floor(Math.random() * hobbies.length);
const hobby = hobbies[randomIndex];
selectedHobbies.push(hobby);
hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
}
return selectedHobbies.join(', ');
}
function generateRandomBirthday() {
const start = new Date('1970-01-01');
const end = new Date('2000-12-31');
const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
const year = randomDate.getFullYear();
const month = randomDate.getMonth() + 1;
const day = randomDate.getDate();
return ${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day};
}
function generateRandomPhoneNumber() {
const areaCode = [
'130',
'131',
'132',
'133',
'134',
'135',
'136',
'137',
'138',
'139',
'150',
'151',
'152',
'153',
'155',
'156',
'157',
'158',
'159',
'170',
'176',
'177',
'178',
'180',
'181',
'182',
'183',
'184',
'185',
'186',
'187',
'188',
'189'
];
const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
const suffix = String(Math.random()).substr(2, 8);
return prefix + suffix;
}
const generatePersons = count => {
return Array.from(new Array(count)).map((_, i) => {
const first = generateRandomString(10);
const last = generateRandomString(4);
return {
id: i + 1,
email1: ${first}_${last}@xxx.com,
name: first,
lastName: last,
hobbies: generateRandomHobbies(),
birthday: generateRandomBirthday(),
tel: generateRandomPhoneNumber(),
address: 1,
sex: i % 2 === 0 ? 'boy' : 'girl',
work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
city: 'beijing'
};
});
};
const records = generatePersons(10);
const columns = [
{
field: 'id',
title: 'ID',
width: 80,
sort: true
},
// {
// field: 'email1',
// title: 'email',
// width: 'auto',
// sort: true,
// editor: 'input-editor'
// },
{
field: 'full name',
title: 'Full name',
columns: [
{
field: 'name',
title: 'First Name\n(input editor)',
width: 120,
editor: 'input-editor'
},
{
field: 'lastName',
title: 'Last Name\n(input editor)',
width: 100,
editor: 'input-editor'
}
]
},
// {
// field: 'hobbies',
// title: 'hobbies',
// width: 100,
// editor: 'input-editor'
// },
{
field: 'birthday',
title: 'birthday\n(date editor)',
width: 120,
editor: 'date-input-editor'
},
{
field: 'sex',
title: 'sex\n(list editor)',
width: 100,
editor: 'list-editor'
},
{
field: 'address',
title: 'address\n(textArea editor)',
width: 300,
editor: 'textArea-editor',
aggregation: {
aggregationType: VTable.TYPES.AggregationType.CUSTOM,
aggregationFun(values) {
console.log('vvvv', values);
return values?.reduce((prev, cur) => prev + Number(cur), 0);
},
formatFun(value) {
return value;
}
}
},
{
field: 'tel',
title: 'telephone',
width: 150
},
{
field: 'work',
title: 'job',
width: 200
},
{
field: 'city',
title: 'city',
width: 150
}
];
const option = {
container: document.getElementById(CONTAINER_ID),
records,
columns,
enableLineBreak: true,
autoWrapText: true,
limitMaxAutoWidth: 600,
heightMode: 'autoHeight',
editCellTrigger: 'click',
keyboardOptions: {
copySelected: true,
pasteValueToCell: true,
selectAllOnCtrlA: true
}
};
tableInstance = new VTable.ListTable(option);
tableInstance.on('change_cell_value', arg => {
console.log(arg);
});
window['tableInstance'] = tableInstance;
`
Current Behavior
数据没被刷新。
查看原因:
recalculate 中没有执行对应的方法进行重新计算。
recalculate() {
// do nothing
}
这个设计的意图是啥?
Expected Behavior
结束编辑状态后未重新获取新的数据,刷新单元格
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.