VisActor / VisActor/VTable

[Bug] 筛选插件,如果在筛选状态下,我执行updateRecords,取消筛选后或者重新筛选我在record里额外携带的字段并没有赋值到table.options.records里

Open
#4,794 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

1.22.4

Link to Minimal Reproduction

Steps to Reproduce

// import * as VTable from '@visactor/vtable';
// 使用时需要引入插件包 @visactor/vtable-plugins
// import { FilterPlugin } from '@visactor/vtable-plugins';
// 正常使用方式 const filterPlugin = new FilterPlugin({});
// 官网编辑器中将 VTable.plugins 重命名成了 VTablePlugins
const input_editor = new VTable_editors.InputEditor();
VTable.register.editor('input-editor', input_editor);
const generateDemoData = (count) => {
const departments = ['研发部', '市场部', '销售部', '人事部', '财务部'];
const statuses = ['在职', '请假', '离职'];

return Array.from(new Array(count)).map((_, i) => ({
id: i + 1,
name: '员工' + (i + 1),
age: 22 + Math.floor(Math.random() * 20),
department: departments[i % departments.length],
salary: 5000 + Math.floor(Math.random() * 15000),
status: statuses[i % statuses.length],
isFullTime: i % 3 !== 0
}));
};

const filterPlugin = new VTablePlugins.FilterPlugin({
filterModes: ['byValue', 'byCondition']
});

const option = {
records: generateDemoData(50),
columns: [
{ field: 'id', title: 'ID', width: 60 },
{
field: 'name', title: '姓名', width: 120, editor: 'input-editor',
style: (args) => {
const isDeleted = args.table.options.records[args.row - 1].deleted === true
const hasBgColor = args.table.options.records[args.row - 1].hasBgColor === true
// 检查是否有修改过的单元格标记
const cellModified =
args.table.options.records[args.row - 1]?.modifiedCells?.[args.cellHeaderPaths.colHeaderPaths[0].field] ||
false
return {
lineThrough: isDeleted ? true : false,
bgColor: hasBgColor || cellModified ? 'red' : '#fff'
}
},
},
{ field: 'age', title: '年龄', width: 100 },
{ field: 'department', title: '部门', width: 120 },
{
field: 'salary', title: '薪资', width: 120,
fieldFormat: (record) => '¥' + record.salary
},
{ field: 'status', title: '状态', width: 100 },
{ field: 'isFullTime', title: '全职', width: 80, cellType: 'checkbox' }
],
plugins: [filterPlugin]
};

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window.tableInstance = tableInstance;
tableInstance.on('change_cell_value', (params) => {
const { col, row } = params

// 通过列索引获取列配置
const column = tableInstance.options.columns[col]

const recordIndex = tableInstance.getRecordShowIndexByCell(col, row)
console.log('索引', recordIndex, tableInstance.options)
const currentRecord = tableInstance.records[recordIndex]

// 使用列的field名称
const updatedRecord = {
...currentRecord,
modifiedCells: {
...currentRecord.modifiedCells,
[column.field]: true // 使用field名称
}
}

tableInstance.updateRecords([updatedRecord], [recordIndex])

console.log(
'tableInstance.records和tableInstance.options.records:',
tableInstance.records,
tableInstance.options.records
)
})

Current Behavior

情况1:
不筛选,改变编辑姓名列某个单元格,背景色变红。
(我在change_value时通过updateRecords设置了额外参数modifiedCells,在列style里设置了条件背景色)
不筛选情况下打印tableInstance.records和tableInstance.options.records对象里我设置的modifiedCells都有值

Image

情况2:
筛选选中员工2、3、4,改变编辑姓名列员工2的值,背景色未变红。
通过打印tableInstance.records和tableInstance.options.records对象,发现只有tableInstance.records里员工2的对象modifiedCells有值,tableInstance.options.records里没有。

Image

我发现tableInstance.records会随着筛选而变化,所以我style里取的是tableInstance.options.records里的值。
只要取消筛选,或者改变筛选状态,我设置的额外参数就没有地方去获取了,但不筛选的情况下updateRecords,额外参数会同步到tableInstance.options.records里。

Expected Behavior

期望点击筛选的情况下,updateRecords后数据也会正确同步到tableInstance.options.records里

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the FilterPlugin and the updateRecords flow shown in the issue's reproduction, then run the filtering and editing steps for employees 2–4. Compare tableInstance.records with tableInstance.options.records after editing and changing or clearing the filter; done means the extra modifiedCells field remains available in tableInstance.options.records.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.