vue用element的表格接收一个“一对多”参数问题

前两天有个朋友问我在给element表格循环赋值的时候提示该字段未定义

先看下源码

      id": 2,
      "name": "测试",
      "loginDate": null,
      "createBy": null,
      "createTime": null,
      "updateBy": null,
      "updateTime": null,
      "remark": null,
      "tptFcontact": [
        {
          "id": null,
          "userid": null,
          "name2": "测试下1",
        },
        {
          "id": null,
          "userid": null,
          "name2": "测试下2",
        }
      ]
 

 

<el-table
 :data="naviTable"
  style="width: 100%"
    >
<el-table-column
label="用户昵称"
 prop="name"
 width="100px"
        >
 </el-table-column>

<el-table-column
                label="联系人"
                prop="name2"
                //这边写name2不会报错 但是无值

                 prop="tptFcontact"
                //这边写tptFcontact会undefined

                 prop="tptFcontact.name2"
                //这边写tptFcontact不会报错
                width="1300px"
 >
</el-table-column>
</el-table>

看到这里大概都想到的是去循环tptFcontact，这样想是对的，但是只是单纯的v-for循环tptFcontact取name2浏览器会提示tptFcontact是未定义的值

有两种解决方案

第一种

利用插槽获取父参数，在进行v-for循环

  <el-table-column
      label="联系人-电话"
      width="1300px"
      >
      <template slot-scope="scope">
      <span  v-for="(i,d) in scope.row.tptFcontact">
      姓名:{{i.name2}}
      </span>
      </template>
  </el-table-column>

第二种

使用:formatter格式化器

<el-table-column
label="联系人"
prop="name2
:formatter="questionData"
>

new Vue({
    questionData(row) {
      let arr = []
      row.tptFcontact.forEach((item, index) => {
        if (index > 2) {
            return
        }
        arr.push(item.name2);
        return arr.join(',')
    }
})