我正在尝试构造具有扩展行的数据表,在该表中,我希望扩展部分占用父行的整个宽度。不幸的是,展开的行会自动分为几列,因此,如果我在<div>
中仅添加一个<template>
,它将显示在父行的第一项下。如何使展开的项目占据桌子的整个宽度?
我找到了实现这一目标的源,但是语法是根据我的理解,与我正在使用的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>
展开项目的广告位接受2个参数:{ headers, item }
。将标头的长度作为属性传递给组件,以确定包裹colspan=
模板的td的expanded-item
...
<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;
}
}
}
}