el-tree组件的锚点链接

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就自动移动到顶部了

scrollIntoView({ behavior: "smooth" });

猜你喜欢

转载自blog.csdn.net/m0_70547044/article/details/132654415
今日推荐