默认形态对应 Arco line-less，type="underline" 对应 Arco 默认轨道。 属性用法见 Element Plus 文档。
默认对应 Arco line-less；点击链接滚动示例自己的容器。
<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>
<template>
<div style="width: 100%; display: flex; gap: 24px">
<el-anchor :container="'#' + id" :offset="0" style="width: 150px; flex-shrink: 0">
<el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
</el-anchor>
<div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
<section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
</div>
</div>
</template>type="underline" 对应 Arco 默认轨道；滚动时标记跟随章节。
<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>
<template>
<div style="width: 100%; display: flex; gap: 24px">
<el-anchor :container="'#' + id" type="underline" :offset="0" style="width: 150px; flex-shrink: 0">
<el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
</el-anchor>
<div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
<section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
</div>
</div>
</template>direction="horizontal" 将链接横向排列，仍定位到示例容器内。
<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>
<template>
<div style="width: 100%; ">
<el-anchor :container="'#' + id" type="underline" direction="horizontal" :offset="0">
<el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
</el-anchor>
<div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
<section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
</div>
</div>
</template>