vue3.0使用el-tree默认选中行

weixin_59049930

已于 2023-05-15 14:25:50 修改

阅读量994

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-16 13:48:29 首次发布

本文链接：https://blog.csdn.net/weixin_59049930/article/details/127883629

版权

el-tree写法需要绑定ref

<el-tree
    class="project-tree"
    ref="refTree"
    v-if="treeDataList"
    :data="retailDataList"
    node-key="code"
    :default-expanded-keys="[]"
    :default-checked-keys="[1]"
    :props="treeProps"
    :default-expand-all="true"
    :expand-on-click-node="false"
    :highlight-current="true"
    @node-click="handleNodeClick"
>
    <template #default="{ node, data }">
        <span class="custom-tree-node">
            <span>{{ node.label }}</span>
        </span>
    </template>
</el-tree>

声明ref对象


const refTree = ref(null)

js通过ref获取到页面el-tree并使用setCurrentKey(需要默认的行数据)

 nextTick(()=>{
    refTree.value && refTree.value.forEach(element => {
      element.setCurrentKey(newCode) // 因为我的node-key="code" 所以我的是code
    });
  })