Vue，列表展示。多个字段拼接展示

如图展示，展示出一个字段是全部列表字段的全部信息

代码如下
data（）{
		return { 
			listArr: [], 
		}
	}		
	created() {// 创建之前的钩子函数
	    this.getTab() // 执行加载获取tab列表的方法
	 },
 methods: {
	    getTab() {
	      getList().then(res => {// 去街口数据，
	        this.namelists = res.data.items， 假设数据返回有值 
	        let obj = {}
	        let str = '' // 重新赋值namelists
	        for (let i = 0; i < this.namelists.length; i++) {
	        // 要展示的字段拼接
	          str =
	            this.namelists[i].author +
	            '_' +
	            this.namelists[i].display_time +
	            '_' +
	            this.namelists[i].id +
	            '_' +
	            this.namelists[i].pageviews +
	            '_' +
	            this.namelists[i].status +
	            '_' +
	            this.namelists[i].title
           obj = {
	          name: str
	        }
	       this.namelists
	       this.namelists[i].name = str
	       this.listArr.push(this.namelists[i])
        }
     })
   },
}

另一种

<template>
  <div class="app-container">
    <button @click="_addd">annou </button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称" prop="name" width="95" />
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      id: 1
    }
  },
  mounted() { 挂载完成后执行这个方法
    this.fetchData() //
  },
  methods: {
    _addd() {
      this.$router.push({
        name: 'Test',
        params: {
          id: '111'
        }
      })
    },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        // console.log(response, '/')
        this.listArr = response.data.items
        let obj = {}
        let str = ''
        // const obj1 = {}
        for (let i = 0; i < this.listArr.length; i++) {
          str = this.listArr[i].author + '_' + this.listArr[i].display_time + '_' + this.listArr[i].pageviews
          // console.log(str, 'str')
          obj = {
            name: str
          }
          this.listArr[i].name = str
          this.list.push(this.listArr[i])
          // obj1 = {
          //   ...obj,
          //   ...this.listArr[i]
          // }
          // this.list.push(obj1)
        }
        this.listLoading = false
      })
    }
  }
}
</script>