我是Vue的新手.js和DataTable，我希望你们中的一些人有集成它们的经验..
var app = new Vue({
el: '#root',
data(){
return{
employees: [
{
Name: 'Tiger Nixon',
Position: 'System Architect',
Office: 'tokyo',
Age: '61',
StartDate: '2011/04/25',
Salary: '$320,800',
},
],
name: '',
position: '',
office: '',
age: '',
startDate: '',
salary: '',
dataTable: null
}
},
methods: {
addEmployee(){
this.dataTable.row.add([
this.name,
this.position,
this.office,
this.age,
this.startDate,
this.salary,
]).draw(false);
}
},
mounted(){
this.dataTable = $('#data_table').DataTable({
});
}
})#root{
text-align: center;
}
.btn{
margin-bottom: 30px;
}<div id="root" class="container">
<form class="form-inline">
<div class="form-group">
<label for="name">Name:</label><br>
<input type="text" v-model="name" class="form-control" id="name">
</div>
<div class="form-group">
<label for="position">Position</label><br>
<input type="text" v-model="position" class="form-control" id="position">
</div>
<div class="form-group">
<label for="office">Office</label><br>
<input type="text" v-model="office" class="form-control" id="office">
</div>
<div class="form-group">
<label for="age">Age</label><br>
<input type="text" v-model="age" class="form-control" id="age">
</div>
<div class="form-group">
<label for="Start_date">Start Date</label><br>
<input type="text" v-model="startDate" class="form-control" id="start_date">
</div>
<div class="form-group">
<label for="salary">Salary</label><br>
<input type="text" v-model="salary" class="form-control" id="salary">
</div><br><br>
<button type="button" @click="addEmployee" class="btn btn-primary">Submit</button>
</form>
<table id="data_table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start Date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr v-for="employee in employees">
<td>{{ employee.Name }}</td>
<td>{{ employee.Position }}</td>
<td>{{ employee.Office }}</td>
<td>{{ employee.Age }}</td>
<td>{{ employee.StartDate }}</td>
<td>{{ employee.Salary }}</td>
</tr>
</tbody>
</table>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>