02-素材管理-图片列表渲染

• 当组件初始化完毕
  • 发获取素材列表请求
  • 得到数据后赋值 images
  • 渲染列表

<!-- 图片列表 -->
      <div class="img_list">
        <div class="img_item" v-for="item in images" :key="item.id">
          <img :src="item.url" alt />
          <div class="option">
            <span class="el-icon-star-off" :class="{red:item.is_collected}"></span>
            <span class="el-icon-delete"></span>
          </div>
        </div>
      </div>

 // 列表数据
 images: []

created () {
    this.getImages()
  },
  methods: {
      //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明

//拿数据和赋值
    async getImages () {
      const { data: { data } } = await this.$http.get('user/images', { params: this.reqParams })
      this.images = data.results
    }
  }

03-素材管理-分页功能实现

el-pagination 组件属性或事件

• total 总条数
• page-size 一页的条数
• current-page 选中页码
• @current-change 页码改变后事件

div盒子里面：

<!-- 分页 -->
      <el-pagination
      style="text-align:center"
      background layout="prev, pager, next"
      :total="total"
      :page-size="reqParams.per_page"
      :current-page="reqParams.page"
      @current-change="changePager"
      ></el-pagination>

data中依赖的数据：

// 总条数
total: 0

methods中的事件：

 changePager (newPage) {
      this.reqParams.page = newPage
      this.getImages()
    },