element-ui Table 组件循环列表数据不显示？

Question

<el-table :data="peopleList" height='270'>

  <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :align='col.align' :label="col.label" :width="col.width">
    <template slot-scope="scope" v-if="col.label == '头像'">
      <img :src='scop.row.puIcon'>
    </template>
    <template slot-scope="scope" v-if="col.label == '操作'">
      <a @click="del(scope.row)" class="table-del" size="small">删除</a>
    </template>
  </el-table-column>
</el-table>


 columns: [{
      label: '头像',
      id: 'puIcon',
      width: '80'
    },
    {
      label: '邮箱',
      id: 'peopleMail',
      align: 'center'
    },
    {
      label: '操作',
      id: 'operate',
      width: '80'
    },
    
    this.peopleList = [{
    "createBy": 0,
    "del": 0,
    "peopleAppId": 0,
    "peopleAutoLogin": 0,
    "peopleId": 28,
    "peopleMail": "[e-mail]",
    "peopleMailCheck": -1,
    "peoplePhone": "4324234234234234",
    "peoplePhoneCheck": -1,
    "puCity": 0,
    "puDistrict": 0,
    "puIcon": "/upload/1/people/desfsfsfds.png",
    "puProvince": 0,
    "puStreet": 0,
    "updateBy": 0
  }]
  
  这样进行table初始化，但是table不显示数据？

有没有大佬知道原因？

Answer 1

参照这个来改
https://jsfiddle.net/t2hxfeu4/1/