f-table

Giới thiệu

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.

Tạo bảng

Chúng ta sẽ tạo bảng theo cấu trúc như sau:

Các thuộc tính

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:

Tên thuộc tínhKiểu dữ liệuMặc địnhMô tả

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

Last updated