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()
},