利用elementPlus写一个查看用户评价的页面vue

好的，以下是一个简单的查看用户评价的页面的Vue代码示例，利用了Element Plus组件库的表格（Table）、分页（Pagination）、弹窗（Dialog）等组件：

<template>
  <div class="user-evaluation">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="评价ID" width="100" />
      <el-table-column prop="userName" label="用户名" width="120" />
      <el-table-column prop="content" label="评价内容" />
      <el-table-column prop="createTime" label="评价时间" width="180" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="text" @click="handleView(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    />

    <el-dialog :visible.sync="dialogVisible" width="600px">
      <div v-if="currentEvaluation">
        <div class="evaluation-info">
          <div class="evaluation-item">
            <span class="evaluation-label">评价ID：</span>
            <span class="evaluation-value">{{ currentEvaluation.id }}</span>
          </div>
          <div class="evaluation-item">
            <span class="evaluation-label">用户名：</span>
            <span class="evaluation-value">{{ currentEvaluation.userName }}</span>
          </div>
          <div class="evaluation-item">
            <span class="evaluation-label">评价内容：</span>
            <span class="evaluation-value">{{ currentEvaluation.content }}</span>
          </div>
          <div class="evaluation-item">
            <span class="evaluation-label">评价时间：</span>
            <span class="evaluation-value">{{ currentEvaluation.createTime }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 用户评价列表
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总记录数
      dialogVisible: false, // 评价详情弹窗是否可见
      currentEvaluation: null, // 当前查看的评价详情
    };
  },
  mounted() {
    this.fetchEvaluationList();
  },
  methods: {
    // 获取用户评价列表
    fetchEvaluationList() {
      // 模拟数据请求
      const mockData = [
        {
          id: 1,
          userName: '张三',
          content: '这个商品质量非常好，物美价廉！',
          createTime: '2021-08-01 10:23:45',
        },
        {
          id: 2,
          userName: '李四',
          content: '客服态度很好，售后服务也非常及时。',
          createTime: '2021-08-02 14:36:12',
        },
        // ...
      ];
      this.tableData = mockData;
      this.total = mockData.length;
    },

    // 处理分页页码变化
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      // TODO: 请求对应页码的数据
    },

    // 查看评价详情
    handleView(evaluation) {
      this.currentEvaluation = evaluation;
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.evaluation-info {
  padding: 20px;
}
.evaluation-item {
  margin-bottom: 10px;
}
.evaluation-label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}
.evaluation-value {
  display: inline-block;
  width: calc(100% - 80px);
  word-wrap: break-word;
  word-break: break-all;
}
</style>

以上代码中，`tableData`数组存储了用户评价的列表数据，`total`表示总记录数，`currentPage`表示当前页码，`pageSize`表示每页显示的数量。页面中使用了Element Plus的`el-table`和`el-pagination`组件来展示评价列表和分页，点击评价列表中的“查看详情”按钮会弹出评价详情的弹窗，使用了`el-dialog`组件来实现。当用户点击分页时，会触发`handlePageChange`方法，可以在该方法中请求对应页码的数据并更新`tableData`数组和`total`。