การสร้าง DataTable (ตารางข้อมูล) ใน Vue.js สามารถทำได้โดยใช้คอมโพเนนต์ที่มีอยู่หรือแพ็คเกจที่เข้าช่วยในการจัดการและแสดงข้อมูลในรูปแบบตาราง. นี่คือวิธีการสร้าง DataTable ใน Vue.js โดยใช้แพ็คเกจ vue-good-table เป็นตัวอย่าง:
ติดตั้งแพ็คเกจ:
- เริ่มต้นด้วยการติดตั้งแพ็คเกจ
vue-good-tableโดยใช้ npm หรือ yarn:
1
npm install vue-good-table --save
- เริ่มต้นด้วยการติดตั้งแพ็คเกจ
นำเข้าและใช้งาน DataTable:
- นำเข้าแพ็คเกจ DataTable ในคอมโพเนนต์ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"
></vue-good-table>
</div>
</template>
<script>
import VueGoodTablePlugin from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css';
export default {
components: {
VueGoodTable: VueGoodTablePlugin
},
data() {
return {
columns: [
{
label: 'ชื่อ',
field: 'name',
filterable: true
},
{
label: 'อีเมล',
field: 'email',
filterable: true
},
{
label: 'อายุ',
field: 'age',
type: 'number',
filterable: true
}
],
rows: [
{ name: 'John', email: '[email protected]', age: 28 },
{ name: 'Jane', email: '[email protected]', age: 24 },
{ name: 'Bob', email: '[email protected]', age: 32 }
]
};
}
};
</script>ปรับแต่งตามความต้องการ:
- คุณสามารถปรับแต่ง DataTable โดยใช้ props และอิเวนต์ต่างๆ ที่ DataTable รองรับ โดยต้องดูคู่มือของแพ็คเกจเพิ่มเติมเพื่อเรียนรู้เพิ่มเติม.
นี่เป็นตัวอย่างการใช้งาน DataTable ด้วยแพ็คเกจ vue-good-table ใน Vue.js คุณสามารถค้นหาแพ็คเกจหรือคอมโพเนนต์ DataTable อื่นๆ ที่เหมาะกับความต้องการของคุณและปรับแต่งตามความต้องการ.