展示讲师列表数据

把response中的数据取出来具体展示下。

this.total = response.data.total
this.list =  response.data.records
console.log(this.total)
console.log(this.list)

注意一定要使用this.xx，否则会报下面的错哒。

ReferenceError:  xx is not defined

使用element-ui的表格组件进行修改。这里将代码复制到list.vue中替换到template即可。

.<template>
  <div>
    <el-table
      :data="list"
      style="width: 100%"
      border
      fit
      highlight-current-row
      element-loading-text="数据加载中"
      v-loading="listLoading"
    >
      <el-table-column prop="number" label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="80"> </el-table-column>
      <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="资历" />
      <el-table-column prop="gmtCreate" label="添加时间" width="160" />
      <el-table-column prop="sort" label="排序" width="60" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/teacher/edit/' + scope.row.id">
            <el-button type="primary" si***i" icon="el-icon-edit"
              >修改</el-button
            >
          </router-link>
          <el-button
            type="danger"
            si***i"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

看下效果吧。

这段代码究竟是什么意思呢？

注意到第四行 :data="list",这代表遍历我们data中的list，看看script代码，这个list原来就是我们拿到的数据结果集。

this.list =  response.data.records

下面的代码是生成序号，显然:(page - 1) * limit + scope.$index + 1就是记录的序号计算公式。

<el-table-column prop="number" label="序号" width="70" align="center">
   <template slot-scope="scope">
      {{ (page - 1) * limit + scope.$index + 1 }}
   </template>
</el-table-column>

至于其他数据可以对照这后端传过来的数据进行处理与命名。注意到下面代码对于后端传的数据进行了一层包装，使用===将比较两个数据的值、与类型，而==在js中只判断值。比如'1'与1的值相等，类型不同。

 <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
        </template>
</el-table-column>