vue tree展开自动获取焦点

 打开弹窗设置默认焦点

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(); // 假设节点是可聚焦的

　　　　　　　　}

　　　　　　}

　　　　}

　　});

}