Anchor link of el-tree component

el-tree part:

<el-tree
              :default-expand-all="true"
              :data="anchorList"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />

Inside the component:

<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 part: 

const handleNodeClick = (data) => {
  parent = document.querySelector("#content" + data.id);
  parent?.scrollIntoView({ behavior: "smooth" });
};

 In this way, when the el-tree is clicked, the bound div will automatically move to the top

scrollIntoView({ behavior: "smooth" });

Guess you like

Origin blog.csdn.net/m0_70547044/article/details/132654415