elementui写一个评论列表
时间: 2023-10-14 15:55:24 浏览: 69
好的,以下是一个简单的 Element UI 评论列表的示例代码:
```
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>评论列表</span>
</div>
<el-divider></el-divider>
<el-comment
v-for="(comment, index) in comments"
:key="index"
:author="comment.author"
:avatar="comment.avatar"
:content="comment.content"
:datetime="comment.datetime"
>
<template v-if="comment.children">
<el-comment
v-for="(childComment, childIndex) in comment.children"
:key="childIndex"
:author="childComment.author"
:avatar="childComment.avatar"
:content="childComment.content"
:datetime="childComment.datetime"
></el-comment>
</template>
</el-comment>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
comments: [
{
author: '小明',
avatar: 'https://randomuser.me/api/portraits/men/42.jpg',
content: '这是一条评论。',
datetime: '2021-06-01 12:00:00',
children: [
{
author: '小红',
avatar: 'https://randomuser.me/api/portraits/women/42.jpg',
content: '回复小明的评论。',
datetime: '2021-06-01 12:10:00',
},
],
},
{
author: '小张',
avatar: 'https://randomuser.me/api/portraits/men/43.jpg',
content: '这是另一条评论。',
datetime: '2021-06-01 13:00:00',
},
],
};
},
};
</script>
```
在这个示例中,我们使用了 Element UI 的 `el-card` 和 `el-comment` 组件来创建评论列表。`v-for` 指令用于循环渲染每条评论,`v-if` 指令用于判断是否有子评论。您可以根据自己的需要进行修改和扩展。