我遇到了Vue.compile方法的问题。 我将jquery.datatables与Vue2一起使用，并希望使用＆＃39; child row＆＃39;功能，详情请查看以下链接： https://datatables.net/examples/api/row_details.html
我想以与上面链接中描述的相同的方式使用数据表，但我不知道如何通过Vue.component方法实现。
你能帮我解决这个问题吗？提前谢谢。
请参阅我的vue文件。
<template>
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet light ">
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button id="sample_editable_1_new" class="btn sbold green"> Add New
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--<div class="col-md-6">-->
<!--<div class="btn-group pull-right">-->
<!--<button class="btn green btn-outline dropdown-toggle" data-toggle="dropdown">Tools-->
<!--<i class="fa fa-angle-down"></i>-->
<!--</button>-->
<!--<ul class="dropdown-menu pull-right">-->
<!--<li>-->
<!--<a href="javascript:;">-->
<!--<i class="fa fa-print"></i> Print </a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="javascript:;">-->
<!--<i class="fa fa-file-pdf-o"></i> Save as PDF </a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="javascript:;">-->
<!--<i class="fa fa-file-excel-o"></i> Export to Excel </a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<table class="table table-striped table-bordered table-checkable order-column" id="datatable">
<thead>
<tr>
<th>ID </th>
<th>Name </th>
<th>Room type </th>
<th>Actions </th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX"
v-for='item in data'
:class="(index+1 % 2 == 0) ? 'odd' : 'even'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.roomType}}</td>
<!--<td><input type="text" class="form-control" readonly value="20" :value='item.available'></td>-->
<td class="no-sortable">
<div class="btn-group">
<button @click='current = item' type="button" class="btn btn-default btn-edit_action">
<i class="fa fa-pencil"></i> Edit</button>
<button type="button" class="btn btn-default">
<i class="fa fa-remove"></i> Remove</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div>
</template>
<script type='text/babel'>
import fileUpload from '../../directives/fileUpload.vue';
export default{
data(){
return {
data: [],
dataIds: [],
bedTypes: [],
current: null
}
},
props: {
schema: { type: Object }
},
beforeMount() {
this.data = [{
id:20,
name: 'Marriott',
roomType: 'Luxe',
available: 10
}]
},
mounted() {
this.addBedType();
this.data.map((item) => this.dataIds.push(item.id));
console.log(this);
function nestedRow(d) {
return `
<td colspan=7>
<div class="edit-row_body clearfix">
<form novalidate class="form-horizontal" @click="$event.preventDefault()">
<div class="col-sm-5">
<div class="tour-img-block text-left">
<div class="clearfix text-left hotel-pictures">
<input v-file-upload type="file" name="files[]" format="image" multiple class="file-loading">
</div>
<!--<div class="row">-->
<!--<a href="" class="close-preview">×</a>-->
<!--<img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=Upload new image&w=230&h=240" alt="" class="img-responsive">-->
<!--<button class="btn green sbold btn-block mt">Add New</button>-->
<!--</div>-->
<!--<div class="col-sm-4">-->
<!--<div class="clearfix">-->
<!--<div class='portret-sm'>-->
<!--<a href="" class="close-preview">×</a>-->
<!--<img src="http://placehold.it/120x120" class='img-responsive' alt="" >-->
<!--</div>-->
<!--<div class='portret-sm'>-->
<!--<a href="" class="close-preview">×</a>-->
<!--<img src="http://placehold.it/120x120" class='img-responsive' alt="" >-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<hr>
<div>
<div class="form-group" >
<label class="col-sm-5 control-label" style='padding-top: 0;'>Bed Type:</label>
<div class="col-sm-7">
<div class='form-group' v-for='type in bedTypes'>
<div class='col-sm-9 pr-0'>
<input type="text" class="form-control" placeholder="Bed type" v-model='type.name' />
</div>
<div class="col-sm-3">
<span v-if="bedTypes.length > 1">
<button @click='bedTypes.splice(index,1);' class="close-preview tbl-action">×</button>
</span>
</div>
</div>
<button class="btn green sbold btn-right" type="button" @click="addBedType()" >Add new</button>
</div>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<div class="col-sm-12">
<textarea name="description" id="" cols="20" rows="10" placeholder="Room description" class="form-control">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="room size">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Standart Guest">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Additional guest">
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="guest amount">
</div>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="price (AMD)">
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="guest amount">
</div>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="price (AMD)">
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="guest amount">
</div>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="price (AMD)">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="" class="col-xs-2 text-right pr-0">Meal Options</label>
<div class="col-xs-8 meal-opts" >
<div class="btn-group" data-toggle="buttons">
<label class="btn green">
<input type="radio" class="toggle"> Included </label>
<label class="btn green">
<input type="radio" class="toggle"> Breakfast </label>
<label class="btn green active">
<input type="radio" class="toggle"> 3meals/day </label>
<label class="btn green">
<input type="radio" class="toggle"> Carte Blanche </label>
<label class="btn green">
<input type="radio" class="toggle"> Not Included </label>
</div>
</div>
</div>
</div>
</form>
</div>
<div class='edit-row_foot'>
<div class="text-center">
<button class="btn btn-default">Preview</button>
<button class="btn btn-success" @click='save()'>Submit</button>
</div>
</div>
</td>
`;
}
$(()=> {
let $dt = $('#datatable').DataTable();
// Add event listener for opening and closing details
$dt.on('click', '.btn-edit_action', function () {
var tr = $(this).closest('tr');
var row = $dt.row( tr );
console.log(row);
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
//let compiled = Vue.compile(nestedRow());
row.child( nestedRow() ).show();
tr.addClass('shown');
}
});
});
},
methods: {
save() {
this.current = null;
},
remove(id) {
this.confirmBox("You will not be able to recover this room!", "warning", (confirm) => {
if (confirm && id) {
const url = this.buildUrl(this.schema.action, [id]);
App.blockUI();
this.$http
.post(url, {_method: 'delete'})
.then(() => {
let ind = this.dataIds.indexOf(id);
if (ind > -1) {
this.data.splice(ind,1);
this.dataIds.splice(ind,1);
}
App.alert({message: 'Successfully Deleted!'});
})
.finally(() => App.unblockUI());
}
});
},
addBedType() {
this.bedTypes.push({
name: ''
});
}
},
directives: { fileUpload }
}
</script>
<style>
.meal-opt .btn-group {
margin-left:10px;
max-width: 420px;
}
.meal-opt .btn.green {
margin-top: 10px;
}
</style>