[Bug] 主从表开启搜索功能异常 #5036
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