【Vue】mock模拟后端表格数据在前端页面的显示

前端页面

template

<template>
  <div>
    <el-table
      :data="list"
    >
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{
  { row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="{row}">
          <span>{
  { row.name }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

script

<script>
//导入'@/api/list'中的fetchList
import{ fetchList } from '@/api/list'

export default {
  data() {
    return {
      //声明list变量
      list: null,
    }
  },

  created() {
    this.getList