f-table
Last updated
Last updated
f-table
là một component dùng để hiển thị dữ liệu dạng bảng. Component này được xây dựng dựa trên v-data-table
. Tuy nhiên, f-table
được tuỳ biến để có thêm một số tính năng phục vụ cho việc xây dựng và quản lý đơn giản hơn như:
Tạo control tuỳ biến cho từng cột một cách đơn giản nhất (định nghĩa ngay trên headers). Ví dụ: tạo control để nhập, sửa, thay đổi trạng thái trực tiếp trên bảng, tạo control để thực thi một lệnh bất kì trên dòng dữ liệu tương ứng,...
Cho phép xuất dữ liệu dạng bảng ra file Excel.
Tạo giao diện thêm mới, sửa, xóa dữ liệu trực tiếp ngay trên bảng.
Tự động tạo các control phục vụ cho việc tìm kiếm, lọc dữ liệu.
Thêm tiêu đề bảng nhanh chóng.
Chúng ta sẽ tạo bảng theo cấu trúc như sau:
Vì kế thừa nên các thuộc tính của f-table
cũng tương tự như v-data-table
của Vuetify. Tuy nhiên, f-table
có thêm một số thuộc tính sau:
items
Array
[]
Dữ liệu
item-key
String
''
Thuộc tính làm khóa cho mỗi dòng
headers
Array
[]
Cấu hình hiển thị cho mỗi cột
excel
Boolean
false
Cho phép xuất dữ liệu ra file excel
label
String
''
Tiêu đề của bảng
show-select
Boolean
false
Hiển thị cột chọn
update-form
Array
[]
Cấu hình form cập nhật dữ liệu
update-api
Object
{}
Cấu hình API cập nhật dữ liệu
fixed-cols
Number
0
Số cột cố định
fixed-header
Boolean
true
Cố định header
height
Number
0
Chiều cao của bảng
items-per-page
Number
5
Số dòng trên một trang