浅入深出Vue：文章列表

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

新建组件

先来新建组件 List.vue ：

<template>

    <div></div>

</template>

<script>

    export default {

        name: "List"

    }

</script>

<style scoped>

</style>

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

{

    path: '/list',

    name: 'list',

    component: () => import('./views/List.vue')

}

编写页面代码

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

{

    "Code": 200,

    "Message": "后台返回的消息",

    "Data": [

        {

            "Id": 0, //文章的ID

            "Title": "标题",

        },

        ...

    ]

}

<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 控制一下大小看看：

<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>

这样看起来就好很多了。

最后

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

<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>

最后的效果：