浅入深出Vue：文章列表

终于到我们小项目的最后一个功能了，那就是列表页展示！

新建组件

先来新建组件 List.vue：

代码语言：javascript复制

<template>
    <div></div>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style scoped>

</style>

然后添加对应的路由对象：

代码语言：javascript复制

{
    path: '/list',
    name: 'list',
    component: () => import('./views/List.vue')
}

编写页面代码

这里我们选择 ElementUI 中的 Table 组件来进行展示，文章列表接口的数据定义如下：

代码语言：javascript复制

{
    "Code": 200,
    "Message": "后台返回的消息",
    "Data": [
        {
            "Id": 0, //文章的ID
            "Title": "标题",
        },
        ...
    ]
}

代码语言：javascript复制

<template>
    <div>
        <el-row>
            <el-table :data="list">
                <el-table-column prop="Id" label="#">
                </el-table-column>

                <el-table-column prop="Title" label="标题">
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "List",
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list')
                    .then(res => {
                        this.list = res.data.Data
                    })
            }
        }
    }
</script>

<style scoped>

</style>

效果如下：

这个效果不是很好看啊。 用 el-col 控制一下大小看看：

代码语言：javascript复制

<template>
    <div>
        <el-row>
            <el-col :span="16" :offset="4">
                <el-table :data="list">
                    <el-table-column prop="Id" label="#" width="80px">
                    </el-table-column>

                    <el-table-column prop="Title" label="标题" align="center">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

这样看起来就好很多了。

最后

最后让我们在基础布局那加上发布和登录的按钮吧：

代码语言：javascript复制

<template>
  <div id="app">
    <el-container>
      <el-header style="text-align:center;">
        <span>浅入深出Vue-入门篇</span>
        <span style="float: right;">
          <el-button type="primary" size="mini" icon="el-icon-edit">发布文章</el-button>
          <el-button type="default" size="mini">登录</el-button>
        </span>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

最后的效果：

el list table 布局 登录

0 人点赞