vue方法获取 timeline 的每一项显示的文字信息
时间: 2024-03-01 18:54:45 浏览: 19
可以通过遍历`timelineData`数据数组,获取每个`timeline-item`显示的文本信息。在`el-timeline-item`中使用插槽,将文本信息通过`slot`传递到子组件中,再在子组件中将文本信息作为`props`传递即可。
示例代码如下:
```vue
<template>
<el-timeline ref="timeline">
<el-timeline-item v-for="(item, index) in timelineData" :key="index">
<custom-timeline-item :text="item"></custom-timeline-item>
</el-timeline-item>
</el-timeline>
</template>
<script>
import CustomTimelineItem from "./CustomTimelineItem.vue";
export default {
components: {
CustomTimelineItem
},
data() {
return {
timelineData: ["第一项", "第二项", "第三项"]
};
}
};
</script>
```
在子组件`CustomTimelineItem`中,通过`props`获取到传递过来的文本信息`text`,并将它渲染到模板中。
示例代码如下:
```vue
<template>
<div>{{ text }}</div>
</template>
<script>
export default {
props: {
text: {
type: String,
required: true
}
}
};
</script>
```
这样,通过遍历`timelineData`数组获取到了每个`timeline-item`显示的文本信息。