VisActor / VisActor/VTable

[Bug] 主从表开启搜索功能异常

Open
#5,036 1 comment 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.23.3

Link to Minimal Reproduction

https://www.visactor.io/vtable/demo/plugin/master-detail

Steps to Reproduce

主从表开启搜索功能,主表只有一条数据显示高亮,从表不显示高亮
function generateData(count) {
const departments = ['技术部', '产品部', '设计部', '市场部', '销售部'];
const data = [];

for (let i = 1; i <= count; i++) {
const department = departments[Math.floor(Math.random() * departments.length)];
const salary = Math.floor(Math.random() * 20000) + 8000;

// 为每个员工生成项目参与记录
const projects = [];
const projectCount = Math.floor(Math.random() * 4) + 2;

for (let j = 0; j < projectCount; j++) {
  projects.push({
    '项目名称': `项目 ${String.fromCharCode(65 + j)}-${i}`,
    '项目状态': Math.random() > 0.5 ? '进行中' : '已完成',
    '参与角色': Math.random() > 0.5 ? '开发工程师' : '项目经理',
    '工作量': `${Math.floor(Math.random() * 60) + 20}%`
  });
}

data.push({
  id: i,
  '员工编号': `EMP-${String(i).padStart(4, '0')}`,
  '姓名': `员工${i}`,
  '部门': department,
  '职位': i % 3 === 0 ? '高级工程师' : '开发工程师',
  '月薪': `¥${salary.toLocaleString()}`,
  '项目数量': projectCount,
  children: projects
});

}

return data;
}

// 创建主从表插件
const masterDetailPlugin = new VTablePlugins.MasterDetailPlugin({
id: 'employee-detail-plugin',
detailTableOptions: {
columns: [
{
field: '项目名称',
title: '项目名称',
width: 200,
style: { fontWeight: 'bold' }
},
{
field: '项目状态',
title: '项目状态',
width: 120,
style: { textAlign: 'center' }
},
{
field: '参与角色',
title: '参与角色',
width: 140
},
{
field: '工作量',
title: '工作量',
width: 100,
style: { textAlign: 'center', fontWeight: 'bold', color: '#dc2626' }
}
],
defaultRowHeight: 36,
defaultHeaderRowHeight: 42,
style: {
margin: [16, 20],
height: 200
},
theme: VTable.themes.BRIGHT
}
});

// 主表配置
const records = generateData(15);

const columns = [
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: '员工编号', title: '员工编号', width: 120 },
{ field: '姓名', title: '姓名', width: 100, sort: true },
{ field: '部门', title: '部门', width: 100, sort: true },
{ field: '职位', title: '职位', width: 120, sort: true },
{
field: '月薪',
title: '月薪',
width: 120,
style: { textAlign: 'right', fontWeight: 'bold', color: '#059669' }
},
{
field: '项目数量',
title: '参与项目',
width: 100,
style: { textAlign: 'center', fontWeight: 'bold' }
}
];

const option = {
container: document.getElementById(CONTAINER_ID),
columns,
records,
autoFillWidth: true,
widthMode: 'standard',
ttheme: VTable.themes.ARCO,
plugins: [masterDetailPlugin]
};

const dom = document.getElementById(CONTAINER_ID);
tableInstance = new VTable.ListTable(dom, option);
window['tableInstance'] = tableInstance;

const search = new SearchComponent({
  table: tableInstance,
  autoJump: true
});
window.search = search;

const searchContainer = document.createElement('div');
searchContainer.style.position = 'absolute';
searchContainer.style.top = '0';
searchContainer.style.right = '0';
searchContainer.style.backgroundColor = '#FFF';
const input = document.createElement('input');
searchContainer.appendChild(input);
const result = document.createElement('span');
result.innerText = '0/0';
searchContainer.appendChild(result);
const searchBtn = document.createElement('button');
searchBtn.innerText = 'search';
searchContainer.appendChild(searchBtn);
const nextBtn = document.createElement('button');
nextBtn.innerText = 'next';
searchContainer.appendChild(nextBtn);
const prevBtn = document.createElement('button');
prevBtn.innerText = 'prev';
searchContainer.appendChild(prevBtn);
searchBtn.addEventListener('click', () => {
  const searchResult = search.search(input.value);
  result.innerText =
    searchResult.results.length === 0 ? '0/0' : `${searchResult.index + 1}/${searchResult.results.length}`;
});
prevBtn.addEventListener('click', () => {
  const searchResult = search.prev();
  result.innerText =
    searchResult.results.length === 0 ? '0/0' : `${searchResult.index + 1}/${searchResult.results.length}`;
});
nextBtn.addEventListener('click', () => {
  const searchResult = search.next();
  result.innerText =
    searchResult.results.length === 0 ? '0/0' : `${searchResult.index + 1}/${searchResult.results.length}`;
});
dom.appendChild(searchContainer);
Current Behavior

主从表开启搜索功能,主表只有一条数据显示高亮,从表不显示高亮

Expected Behavior

希望能像明细表一样主表从表搜索到的内容都显示高亮

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 linked master-detail demo and the SearchComponent setup shown in the issue. Trace how search results apply highlighting to the main table and how the MasterDetailPlugin creates detail tables; done means matching results in both the main and detail tables are highlighted, with the behavior checked in the reproduction.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.