VUE 结合 jquery.dataTables 使用

Vue 结合 DataTables 使用

  • 前言
  • 使用
  • 结语

前言

在公司的项目里表格渲染使用的是 DataTables,同时我想使用 Vue 来进行数据绑定。

使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="E:\03_资料\02_开发组件库\01_前端\01_jquery-3.7.0.js">script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
    <script src="E:\03_资料\02_开发组件库\01_前端\03_jquery.dataTables.min.js">script>
    <link rel="stylesheet" href="E:\03_资料\02_开发组件库\01_前端\02_jquery.dataTables.min.css">
head>
<body>
    <div id="app">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>姓名th>
                    <th>电话th>
                    <th>住址th>
                    <th>年龄th>
                tr>
            thead>
            <tbody>
                <tr v-for="item in allData">
                    <td>{{item.name}}td>
                    <td>{{item.phone}}td>
                    <td>{{item.address}}td>
                    <td>{{item.age}}td>
                tr>
            tbody>
        table>
    div>
body>
html>
<script>
    $(function () {
            var oTable1 = $('#example')
                .dataTable({
                    "bAutoWidth": false,
                    "aoColumns": [null, null, null, null]
                });
        });
  const { createApp } = Vue
  createApp({
    data() {
      return {
        allData:[
                {'name': '王因','phone': '13457890923','address': '兰州西固','age': 20},
                {'name': '王因','phone': '13457890923','address': '兰州西固','age': 20},
                {'name': '王因','phone': '13457890923','address': '兰州西固','age': 20},
                {'name': '李丽','phone': '13457890923','address': '兰州西固','age': 20},
            ]
      }
    }
  }).mount('#app')
script>

结语

以上是我关于 Vue 和 DataTables 结合使用的解决方案。

你可能感兴趣的:(vue.js,jquery,javascript,前端)