内容管理（五） 03-列表渲染-async数据获取-表格列、封面图、删除当前行的按钮

本文详细介绍了一种基于Vue框架的内容管理系统中，如何利用列表渲染技术展示文章列表。包括组件初始化后的数据获取流程，以及使用el-table组件结合模板语法渲染文章封面、标题、状态和操作按钮的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>