使用 Vue.js & DataTable（jquery 插件）

Question

我是 Vue.js 和 DataTable 的新手，我希望你们中的一些人对它们的集成有经验.. 有人可以肯定地说这是集成 Vue.js 和 DataTable（jquery 插件）的好方法吗？它工作得很好，但我想确定它是正确的方法...... 谢谢:)

 var app = new Vue({

     el: '#root',

  data(){
      return{
                employees: [
                    {
                        Name: 'Tiger Nixon',
                        Position: 'System Architect',
                        Office: 'tokyo',
                        Age: '61',
                        StartDate: '2011/04/25',
                        Salary: '0,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>

Answer 1

我更喜欢使用 vuejs 的表格替代品。其中之一是来自 ratiw 的组件 https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md

漂亮的 quick 可以轻松地与 bootstrap 或语义 ui 框架集成。也有非常好的自定义排序字段和搜索以及从 api 获取数据，但该部分需要来自 api 的特定数据响应格式，除非你没有太多控制权，否则很难实现例如分页。

另一种选择是https://github.com/matfish2/vue-tables-2。 ~~我发现这个更难入手，因为它需要一些 jsx 设置~~，但它的结构比上面的第一个更好。

更新：vue-tables-2 现在已预编译，不需要ui任何转换或加载器

老实说，我更喜欢上面的选项之一，或者如果您在 awesome-vue 上找到另一个组件形式的选项（github 上的 vue 组件列表）。通过使用此类自定义组件，您可以摆脱 2 个库（jquery 和数据表），并且它们可以很好地发挥 vue 的反应性。

除非您不需要 pdf 导出、样式表导出或精美的打印内容，否则我不明白您为什么要使用数据表。

Answer 2

我只使用 VueJS 重建了 DataTable jQuery 插件。到目前为止，我的项目 VueDataTable 具有以下特点：

多列排序
搜索过滤器
分页
条目长度选项
自定义文字
英语、葡萄牙语和西班牙语的语言支持

您可以使用 npm 安装它。有关详细信息，请查看 Github and on demo projects (demo1, and demo2)

希望这对您或其他人有所帮助。实际上，几周前我来到这里解决这个问题，然后在没有找到好的解决方案之后，我决定创建 VueDataTable。

使用 Vue.js & DataTable（jquery 插件）

using Vue.js & DataTable(jquery plugin)

datatables

vue.js

vue-tables-2