打开弹窗设置默认焦点
html代码
重点: 设置 node-key="id" ref="table_dedh"
<el-tree :data="dedhtreeData" node-key="id" ref="table_dedh" :props="{ children: 'children', label: 'label'}" @node-click="dedhhandleNodeClick"></el-tree>
js代码
数据渲染时设置id
在数据渲染后设置焦点
// 通过DOM选择器查找节点
const node =table_dedh.value?.$el.querySelector('[data-key="0"]');
if (node) {
node.scrollIntoView();
node.focus(); // 假设节点是可聚焦的
}
const dedhtreeData = ref([])
const table_dedh = ref()
// 弹窗事件
const getDedhsubmit = (index, row) => {
//获取展示数据
//整理数据设置id
const transformItems = (items,indexs) => {
return items.map((item,index) => ({
id: `${indexs}-${index}`,
label: `${item.sys_mc}【${item.sys_bh}】`,
params: {
code: item.sys_bh
},
children: item.bh_mc ? transformItems(item.bh_mc) : []
}));
};
const transformedData2 = getPieceWorks.data.map((topItem,indexs) => ({
id: indexs,
label: `${topItem.sys_mc}【${topItem.sys_bh}】`,
params: {
code: topItem.sys_bh
},
children: topItem.bh_mc ? transformItems(topItem.bh_mc,indexs) : []
}));
//渲染数据
dedhtreeData.value = transformedData2;
nextTick(() => {
// 手动设置选中节点，如果默认选中不生效，可以使用此方法
if (table_dedh.value) {
const tree = table_dedh.value?.$el; // 访问组件实例的 $el
if (tree) {
// 通过DOM选择器查找节点
const node = tree.querySelector('[data-key="0"]');
if (node) {
node.scrollIntoView();
node.focus(); // 假设节点是可聚焦的
}
}
}
});
}
