使用vuetify的行标题

问题描述

我正在使用vuetify 1.0.，正在使用v-data-table组件显示数据。但是我在这里面临的问题是我无法弄清楚如何在行中显示标题。如下所示。

Name:  XYZ
Location: PQR
Number: 000-000-0000

但是现在表格看起来像这样：

Name      Location    Number
XYZ
PQR
000-000-0000

在下面的代码中，manager_array由单个对象组成。

<template>
  <v-card>
      <v-card>
        <v-container fluid>
          <v-data-table
            :headers="headers"
            :items="manager_array"
            hide-actions
            :disable-initial-sort="true">
            <template slot="items" slot-scope="props">
              <tr>{{ props.item.first_name }}</tr>
              <tr>{{ props.item.location }}</tr>
              <tr>{{ props.item.number }}</tr>
            </template>
          </v-data-table>
        </v-container>
      </v-card>
  </v-card>      
</template>

<script>

  export default {
    props: ['manager'],data () {
      return {
        manager_array: [],headers: [
          { text: 'Name',value: 'name'},{ text: 'Location',value: 'location'},{ text: 'Number',value: 'number'},]
      }
    },created() {
      this.manager_array.push(this.manager)
    },};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）