使用el-rate快速实现带星评论的组件，并分页显示评论

前行之路_vennie

已于 2022-08-02 15:17:09 修改

阅读量1.3k

点赞数

文章标签： elementui vue.js javascript

于 2022-08-02 15:09:43 首次发布

本文链接：https://blog.csdn.net/qq_45934004/article/details/126121789

版权

本文介绍了如何利用Element UI的el-rate组件创建带有星级评价的评论功能，并结合Vue.js和JavaScript实现评论的分页显示。通过调用POST和GET接口，实现了评论的发布和获取。提供了HTML结构和JS代码示例，帮助开发者理解实现过程。

摘要由CSDN通过智能技术生成

首先明确业务逻辑：先发布，再显示。也就是必然会用到post和get请求。

话不多说先上效果图，稍微有点基础都能看懂，样式代码我就不贴了，都能自己写组件了，自然都会哈哈。接口是已经写好，我直接调用的。

HTML 这一段是评论的显示区域

<div class="commentArea">
        <div class="viewerBox">
          <div
            class="commentBox"
            v-for="item in comments"
            :key="item.id"
          >
            <div class="createdBy">{
  {item.createBy}}</div>
            <div>
              <el-rate
                v-model="item.score"
                disabled="disabled"
              ></el-rate>
            </div>
            <div class="comment_content">
              <div class="content_txt"