3
저는 Vue.js와 DataTable에 새로운 사람입니다. 여러분 중 일부는 통합에 대한 경험이 있기를 바랍니다. 누군가가 그 좋은 방법으로 Vue.js & DataTable (jquery plugin)? 그냥 좋은 작품입니다하지만 난이 ... 올바른 방법 감사합니다 :)Vue.js & DataTable (jquery plugin)을 사용합니다.
\t var app = new Vue({
\t el: '#root',
\t \t data(){
\t \t 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
}
\t \t },
\t \t methods: {
\t \t addEmployee(){
\t \t \t this.dataTable.row.add([
\t \t \t this.name,
\t \t \t this.position,
\t \t \t this.office,
\t \t \t this.age,
\t \t \t this.startDate,
\t \t \t this.salary,
\t \t \t ]).draw(false);
\t \t }
\t \t },
\t \t mounted(){
\t \t this.dataTable = $('#data_table').DataTable({
\t \t });
\t \t }
\t })#root{
text-align: center;
}
.btn{
margin-bottom: 30px;
}<div id="root" class="container">
\t <form class="form-inline">
\t \t <div class="form-group">
\t \t \t <label for="name">Name:</label><br>
\t \t \t <input type="text" v-model="name" class="form-control" id="name">
\t \t </div>
\t \t <div class="form-group">
\t \t \t <label for="position">Position</label><br>
\t \t \t <input type="text" v-model="position" class="form-control" id="position">
\t \t </div>
\t \t <div class="form-group">
\t \t \t <label for="office">Office</label><br>
\t \t \t <input type="text" v-model="office" class="form-control" id="office">
\t \t </div>
\t \t <div class="form-group">
\t \t \t <label for="age">Age</label><br>
\t \t \t <input type="text" v-model="age" class="form-control" id="age">
\t \t </div>
\t \t <div class="form-group">
\t \t \t <label for="Start_date">Start Date</label><br>
\t \t \t <input type="text" v-model="startDate" class="form-control" id="start_date">
\t \t </div>
\t \t <div class="form-group">
\t \t \t <label for="salary">Salary</label><br>
\t \t \t <input type="text" v-model="salary" class="form-control" id="salary">
\t \t </div><br><br>
\t \t <button type="button" @click="addEmployee" class="btn btn-primary">Submit</button>
\t </form>
\t <table id="data_table" class="display" cellspacing="0" width="100%">
\t \t <thead>
\t \t <tr>
\t \t \t <th>Name</th>
\t \t \t <th>Position</th>
\t \t \t <th>Office</th>
\t \t \t <th>Age</th>
\t \t \t <th>Start Date</th>
\t \t \t <th>Salary</th>
\t \t </tr>
\t \t </thead>
\t \t <tbody>
\t \t <tr v-for="employee in employees">
\t \t \t <td>{{ employee.Name }}</td>
\t \t \t <td>{{ employee.Position }}</td>
\t \t \t <td>{{ employee.Office }}</td>
\t \t \t <td>{{ employee.Age }}</td>
\t \t \t <td>{{ employee.StartDate }}</td>
\t \t \t <td>{{ employee.Salary }}</td>
\t \t </tr>
\t \t </tbody>
\t </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/[email protected]/dist/vue.js"></script>
답변 주셔서 감사합니다.하지만 파일 (엑셀 등)을 내보내고 jQuery DataTable의 도구와 도구는 다른 라이브러리 나 프레임 워크보다 훨씬 큽니다. 따라서 Vue.js와 jQuery를 통합하고 싶습니다. Vue의 고급 구성 요소 기술에 대한 DataTable 및 고품질의 테이블 기능을 사용하는 강력한 jQuery DataTable .. 내가 찾고있는 대답은 위의 Vue.js 및 DataTable (jquery 플러그인) 예제와 좋은 구현 조언에 대한 확인입니다. .. thanks :) –
그것은 나에게 지금까지 멋지게 보인다. 직선적이고 이해하기 쉬운 한 완벽하게 괜찮습니다. 나는 표의 발견에 관한 몇 가지 조정을 제안 할 것이다. 생성 된 후크에서 id 대신에'$ refs'를 사용하거나 고유 한 ID (예 : 현재 날짜) 'this.tableId = new Date(). getTime(). toString()'을 생성하고'
대단히 감사합니다 :) –
관련 문제