下载Axios

npm install axios -s

在min.js中引入

import axios from 'axios'
Vue.prototype.$axios= axios

1. 拿到接口先封装一下api—>新建文件夹—>后缀名.js文件
   

2. 暴露接口名称,在那个页面调用接口就在哪个页面引入
   
   

3. 用element ui 里面的el-table和el-table-column这两个组件
   

4. 在data中定义一个存放列表数据的空数组

eduList: [], //存放列表数据的数组

5. 在el-table中动态绑定一下

 <el-table :data="eduList"></el-table>

6. 在methods中定义一个方法,调用接口,打印一下数据

 methods: {
    /** 通知公告列表 */
    getList() {
      this.loading = true;
      listPage(this.queryParams).then(response => {
        console.log(response.data,'111111111');
      });
      this.loading = false;
    },
   }

listPage是封装好的接口暴露出来的名称

7. 拿到数据以后,给data中定义的空数组赋值

 getList() {
      this.loading = true;
      listPage(this.queryParams).then(response => {
        console.log(response.data,'111111111');
          this.eduList = response.data.data; // 给定义的列表空数组赋值
          this.total = response.data.total; //分页相关
          this.loading = false;
      });
      this.loading = false;
    },

8. 赋值完成以后,看一下需要展示那些数据,el-table-column中用prop绑定

   打印出来的数据

   

el-table-column中用prop绑定

<el-table v-loading="loading" :data="eduList">
      <el-table-column label="序号" align="center" prop="id" />

      <el-table-column
        label="通知类型"
        align="center"
        prop="noticeType"
        width="180"
        :formatter="typeFormat"
      >
      </el-table-column>

      <el-table-column
        label="发布单位"
        align="center"
        prop="unit"
        :formatter="unitsFormat"
      />

      <el-table-column label="标题" align="center" prop="title" />

      <el-table-column
        label="发布时间"
        align="center"
        prop="createTime"
        width="180"
      >
      </el-table-column>