07-内容管理-列表渲染
- 当组件初始化完毕
- 根据默认的筛选条件进行查询
- 获取查询的结果数据,给articles赋值。
- 添加表格的列,进行渲染
// 文章列表数据
articles: []
created () {
// 获取频道选项数据
this.getChannelOptions()
// 获取文章列表数据
this.getArticles()
},
async getArticles () {
// post 请求 post(‘地址’,‘数据’)
// get 请求 get(‘地址’,‘{params:数据}’)
const { data: { data } } = await this.$http.get('articles', { params: this.reqParams })
this.articles = data.results
}
渲染表格的列:
<el-table-column label="封面">
<template slot-scope="scope">
<!-- scope.row 数据组件内部传递数据 代表当前行数据(每次遍历的item) -->
<el-image :src="scope.row.cover.images[0]" fit="cover" style="width:160px;height:100px">
<div slot="error">
<img src="../../assets/images/error.gif" alt="" style="width:160px;height:100px">
</div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<!-- 数据 scope.row.status 值 0 1 2 3 4 代表不同的状态 -->
<el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
<el-tag v-if="scope.row.status===1" >待审核</el-tag>
<el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
<el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
<el-tag v-if="scope.row.status===4" type="danger">已删除</el-tag>
</template>
</el-table-column>
<el-table-column prop="pubdate" label="发布时间"></el-table-column>
<el-table-column label="操作" width="120px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle plain></el-button>
<el-button type="danger" @click="delArticle(scope.row.id)" icon="el-icon-delete" circle plain></el-button>
</template>
</el-table-column>