Vuetify 数据表，显示无列的展开行

Question

我正在尝试构建一个带有扩展行的数据表，我希望扩展部分占据父行的整个宽度。不幸的是，展开的行会自动分成列，所以如果我在<template> 中只添加一个<div>，它将显示在父行的第一项下。如何让展开的项目占据整个表格的宽度？

我找到了实现此目的的来源，但语法来自我所理解的与我正在使用的 Vuetify 版本不兼容的语法：https://codepen.io/francobao/pen/mqxMKP

这是我的组件，其中包含 <v-data-table>:

<template>
  <div class="row">
    <div class="col-12">
      <v-data-table
        :headers="headers"
        hide-default-footer
        item-key="name"
        :items="getServiceProviders"
        show-expand >
        <template v-slot:expanded-item="{ headers, item }" >
            <ServiceProviderDetails :isEditMode="true" :serviceProvider="item" />
        </template>
      </v-data-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import ServiceProviderDetails from './ServiceProviderDetails';

export default {
  name: 'ServiceProviderTable',
  components: {
    ServiceProviderDetails
  },
  computed: {
    ...mapGetters(['getServiceProviders'])
  },
  data () {
    return {
      headers: [
        {
          text: 'Name',
          value: 'name'
        },
        {
          text: 'Service Provider ID',
          value: 'serviceProviderId'
        }
      ]
    }
  }
}
</script>

这是要在展开行中显示的组件：

<template>
  <div class="row sp-details">
    <div class="col-4 text-right"><span>Name:</span></div>
    <div class="col-4"><input class="details-input" type="text" v-model="details.name" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><span>PortalUrl:</span></div>
    <div class="col-4"><input class="details-input" type="text" v-model="details.portalUrl" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><span>SupplierId:</span></div>
    <div class="col-4"><input class="details-input" type="text"  v-model="details.supplierId" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><p>Integration Enabled:</p></div>
    <div class="col-4 text-left">
      <span class="integration-switch" v-on:click="toggleIntegration(true)" ><input :checked="details.integrationEnabled" type="radio" />Yes</span>
      <span class="integration-switch" v-on:click="toggleIntegration(false)" ><input :checked="!details.integrationEnabled" type="radio" />No</span>
    </div>
    <div class="col-4"></div>
    <div class="col-8 offset-4 text-left">
      <v-btn class="mr-2" color="secondary" :checked="details.integrationEnabled" v-on:click="$emit('cancel')">Cancel</v-btn>
      <v-btn color="primary" v-on:click="$emit('save', details)">Save</v-btn>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceProviderDetails',
  props: \[ 'isEditMode', 'serviceProvider' \],
  data () {
    return {
      details: {
        name: '',
        portalUrl: '',
        supplierId: '',
        integrationEnabled: false
      }
    }
  },
  mounted() {
    if(this.isEditMode){
      this.details = this.serviceProvider;
    }
  },
  methods: {
    toggleIntegration(isEnabled) {
      this.details.integrationEnabled = isEnabled;
    }
  },
  watch: {
    serviceProvider: function() {
      console.log('in serviceprovider')
      if(this.isEditMode){
        console.log(this.serviceProvider)
        this.details = this.serviceProvider;
      }
    }
  }
}
</script>

这是表格标题、第一行和展开行的样子：

Answer 1

扩展项插槽接受 2 个参数：{ headers, item }。将 headers 的长度作为 prop 传递给组件，以确定包装 expanded-item 模板的 td 的 colspan=...

    <template v-slot:expanded-item="{ headers, item }" >
        <ServiceProviderDetails :isEditMode="true" :serviceProvider="item" :colspan="headers.length" />
    </template>

ServiceProviderDetails 组件...

<template>
  <td :colspan="colspan">
   <div class="row sp-details">
    <div class="col-4 text-right"><span>Name:</span></div>
    <div class="col-4"><input class="details-input" type="text" v-model="details.name" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><span>PortalUrl:</span></div>
    <div class="col-4"><input class="details-input" type="text" v-model="details.portalUrl" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><span>SupplierId:</span></div>
    <div class="col-4"><input class="details-input" type="text"  v-model="details.supplierId" /></div>
    <div class="col-4"></div>
    <div class="col-4 text-right"><p>Integration Enabled:</p></div>
    <div class="col-4 text-left">
      <span class="integration-switch" v-on:click="toggleIntegration(true)" ><input :checked="details.integrationEnabled" type="radio" />Yes</span>
      <span class="integration-switch" v-on:click="toggleIntegration(false)" ><input :checked="!details.integrationEnabled" type="radio" />No</span>
    </div>
    <div class="col-4"></div>
    <div class="col-8 offset-4 text-left">
      <v-btn class="mr-2" color="secondary" :checked="details.integrationEnabled" v-on:click="$emit('cancel')">Cancel</v-btn>
      <v-btn color="primary" v-on:click="$emit('save', details)">Save</v-btn>
    </div>
   </div>
  </td>
</template>


export default {
  name: 'ServiceProviderDetails',
  props: \[ 'isEditMode', 'serviceProvider', 'colspan' \],
  data () {
    return {
      details: {
        name: '',
        portalUrl: '',
        supplierId: '',
        integrationEnabled: false
      }
    }
  },
  mounted() {
    if(this.isEditMode){
      this.details = this.serviceProvider;
    }
  },
  methods: {
    toggleIntegration(isEnabled) {
      this.details.integrationEnabled = isEnabled;
    }
  },
  watch: {
    serviceProvider: function() {
      console.log('in serviceprovider')
      if(this.isEditMode){
        console.log(this.serviceProvider)
        this.details = this.serviceProvider;
      }
    }
  }
}

演示：https://codeply.com/p/qAbvfBn8ut