element ui组件中的description如何跳转页面只绑定title
时间: 2024-12-21 07:25:03 浏览: 7
在Element UI的`el-descriptions`组件中,通常描述内容不会直接包含跳转功能,因为这是一个静态信息展示区域。如果你想在点击描述时跳转到另一个页面,并且标题作为目标页面的一部分,你需要自定义组件的行为。
首先,你可以将标题和跳转链接封装在一个自定义组件中,比如`LinkDescription`:
```html
<template>
<el-description-item label="Title">
<a :href="link" v-on:click.prevent="handleClick">{{ title }}</a>
</el-description-item>
</template>
<script>
export default {
props: ['title', 'link'],
methods: {
handleClick() {
// 如果你想阻止默认跳转,可以在handleClick方法里添加这行
event.preventDefault();
this.$router.push(this.link); // 使用Vue Router跳转
}
}
}
</script>
```
然后在`el-descriptions`中使用这个自定义组件:
```html
<el-descriptions :items="[
{ title: 'Custom Link 1', link: '/target-page-1' },
{ title: 'Custom Link 2', link: '/target-page-2' },
]">
<LinkDescription :title="item.title" :link="item.link" v-for="item in items" :key="item.title"></LinkDescription>
</el-descriptions>
```
阅读全文