使用Vue.js＆DataTable（jquery插件）
问题描述：
我是新的Vue.js和DataTable，我希望你们中的一些人有他们的整合经验..有人可以肯定地说，它是一种很好的方法来整合Vue.js & DataTable（jquery插件）？它的工作得很好，但我要确保这是正确的方式... 谢谢:)使用Vue.js＆DataTable（jquery插件）
\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>
答
我喜欢与vuejs表的替代品。 其中之一是从ratiw https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md
相当快的组件开始，并引导或语义UI框架轻松集成。也有非常好的可定制的排序字段和搜索以及从api获取数据，但该部分需要来自您的api的特定数据响应格式，除非您没有太多的控制权，例如实施分页更困难。
另一种选择是https://github.com/matfish2/vue-tables-2。 我发现这个很难开始，因为它需要一些jsx设置，但它的结构比上面的第一个更好。
UPDATE：VUE桌-2现在提供预编译的，并且不需要任何转换或装载机
老实说，我宁愿选择之一从上面或者如果你发现另一个在组件的形式在awesome-vue（github上的vue组件列表）上。 通过使用这样的自定义组件，你摆脱了2个库（jQuery和数据表），他们很好地与vue的反应性质。除非你不需要pdf导出，样式表导出或花式打印的东西，那么我不明白为什么你应该使用数据表。
感谢您的答案，但我确实需要导出文件（Excel等），jQuery DataTable的文档和工具远远大于其他任何库或框架，所以我真的很想将Vue.js与jQuery集成DataTable用于Vue的高级组件技术，以及用于使用高质量表格功能的强大jQuery DataTable ..我正在寻找的答案是对我上面的Vue.js＆DataTable（jquery插件）示例的确认以及一些很好的实现建议。 ..谢谢:) –
到目前为止，对我来说似乎很好。只要它简单易懂并且容易理解，那就很好。我想就表格的发现提出一些调整建议。 在创建的钩子中使用'$ refs'而不是id或生成一些唯一的ID（例如当前日期） 'this.tableId = new Date（）。getTime（）。toString（）'并且使用'
非常感谢你:) –
相关问题