关于vue+element的table表格prop获取数据是数组的问题

渲染列表数据时，table表格属性中的prop获取到的数据是一个数组，
经过研究，发现了两种方法可以把数组中的数据渲染出来。

这是页面代码，prop对应的file后台返回的是一个数组

后台数据

如果页面直接这么写，渲染出来全是undefind，要求是显示数据中的file_name，研究了一会后发现有两种方式

第一种方式

是在这里直接循环file数组

<el-table-column prop="file" label="附件名称" width="220">
          <template slot-scope="scope">
            <span v-for="(item, index) in getFileName(scope.row.file)" :key="index">
             <!-- getFileName是写的用来切割数组的一个方法 -->
              {{item.file_name}}
              <br />
            </span>
          </template>
        </el-table-column>

这是写的切割数组前三条数据

getFileName(files) {
      return files.slice(0,3);
    }

第二种方法

第二种是可以用ele官方的formatter方法来格式化渲染

官方说明

      <el-table-column prop="file" label="附件名称" width="220" :formatter="fileData">
      </el-table-column>

fileData(row){
      
      let arr = []
      row.file.forEach((item, index)=>{
        if (index > 2) {
          return
        }
        arr.push(item.file_name);
      })
      return arr.join(',')
    }

通过formatter方法循环之后return回一个新的arr数组，等于页面渲染的是这个arr

另外如果后台的数组数据过多的话，可以通过切割数组让它只显示数组中前几条数据

这是完成的样子

完成后发现还是挺简单的