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>javascript">
$(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 结合使用的解决方案。
