vue3笔记_表格和分页

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

上一节中封装好axios后，将数据直接显示在table.vue组件页面上，数据看着有点乱，这里使用表格数据展示

表格

对结构化数据进行展示，还可以进行其他操作(比如排序或增删改)

在table.vue中加入如el-table元素，绑定axios返回的数据，上节中将数据赋给了imagesData对象

数据中图片的链接地址，可以加上el-image将其显示出来

      <el-table :data="imagesData.list" style="width: 100%" tooltip-effect="dark">
        <el-table-column align="left" label="ID" prop="id"></el-table-column>
        <el-table-column align="left" label="标题" prop="title"></el-table-column>
        <el-table-column align="left" label="图片" prop="url">
          <template #default="scope">
            <el-image style="width: 100px;height: 100px;" :src="scope.row.url"
              :fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="left" label="类型" prop="type"></el-table-column>
      </el-table>

效果如下

图片无法显示，是因为图片链接有防盗链，如果使用自已的图片是没问题的

分页

当数据量大时，可以使用分页来展示，既能提高性能，还能控制数据量

      <div>
        <el-pagination background layout="total,sizes,prev, pager, next" :total="count" :current-page="queryData.page"
          :page-size="queryData.size" @current-change="currentChange" @size-change="sizeChange" />
      </div>

分页的布局展示了：总条数，每页大小，前后页以及当前页

页码和大小双向绑定到了请求对象(queryData)上,请求数据时会作为参数发给后端接口

分页组件还提供多个事件，这里引入了页码改变，每页大小改变时自动触发对应的方法

//增加2个方法
    sizeChange(val) {
      this.queryData.size = val
      this.fetchData()
    },
    currentChange(val) {
      this.queryData.page = val
      this.fetchData()
    }

效果图

排错 无法显示分页组件:

在分页组件中，属性:page-size和事件@size-change必须同时存在，属性:current-page和事件@current-change必须同时存在，属性:total是必填的

当然了仔细看官方文档是最好的了