el-tree部分:
<el-tree
:default-expand-all="true"
:data="anchorList"
:props="defaultProps"
@node-click="handleNodeClick"
/>
组件内部部分:
<div class="header" :id="'content' + obj.id">
<div class="title1">
{{ toChineseNumber(obj.sort) }}. {{ obj.title }}一级
</div>
<div>
<el-button size="small" @click="up(obj)">
<el-icon :size="16">
<ArrowUp />
</el-icon>
</el-button>
<el-button size="small">
<el-icon :size="16">
<ArrowDown />
</el-icon>
</el-button>
<el-button size="small">
<el-icon :size="16">
<Delete />
</el-icon>
</el-button>
js部分:
const handleNodeClick = (data) => {
parent = document.querySelector("#content" + data.id);
parent?.scrollIntoView({ behavior: "smooth" });
};
这样的话点击el-tree的时候,所绑定的div就自动移动到顶部了文章来源:https://www.toymoban.com/news/detail-693868.html
scrollIntoView({ behavior: "smooth" });文章来源地址https://www.toymoban.com/news/detail-693868.html
到了这里,关于el-tree组件的锚点链接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!