VUE 结合 jquery.dataTables 使用

最新推荐文章于 2024-06-04 09:59:52 发布

汉口君呐

最新推荐文章于 2024-06-04 09:59:52 发布

阅读量602

点赞数

本文链接：https://blog.csdn.net/Adeluoo/article/details/132412376

版权

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>Document</title>
    <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>