vue3+elementPlus实现列表的查询、翻页和查看功能

效果展示

功能实现

1、列表功能

        利用element-plus的组件el-table，轻松实现；

        Tips：jokeMes接口返回的全部数据。

<el-table
    stripe
    :data="
      jokeMes.slice(
        (paginObj.currentPage - 1) * paginObj.pagesize,
        paginObj.currentPage * paginObj.pagesize
      )
    "
    style="width: 100%"
    v-loading="loading"
    empty-text="没有数据"
  >
    <el-table-column fixed prop="passtime" label="时间" width="150" />
    <el-table-column prop="name" label="名字" width="120" />
    <el-table-column prop="text" label="信息" width="600" />
    <el-table-column prop="header" label="图片" width="600" />
    <el-table-column prop="video" label="视频" width="600" />
    <el-table-column prop="top_comments_content" label="内容" width="300" />
    <el-table-column fixed="right" label="操作" width="60">
      <template #default="scope">
        <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>

2、查询功能

        利用filter方法，根据输入的数据过滤接口的数据；

<el-form :inline="true" :model="formInline" class="de