CTable — toolbar

Dải nút bên phải tiêu đề bảng. Mỗi nút bật bằng một prop show-* và phát một sự kiện; CTable không tự làm gì với dữ liệu — trang quyết định hành vi.

<script setup lang="ts">
import { ref } from 'vue'
import { message } from '@tasco/ui'

// Toàn bộ toolbar: tiêu đề, nút Thêm mới, ô tìm kiếm, Lọc, Xuất, Tải lại, Thiết lập,
// cộng một nút riêng của trang chèn qua slot #toolbar.
interface Order { id: number, code: string, customer: string }

const columns = [
  { title: 'Mã đơn', dataIndex: 'code', key: 'code', width: 140 },
  { title: 'Khách hàng', dataIndex: 'customer', key: 'customer' },
]

const ALL: Order[] = [
  { id: 1, code: 'DH-0001', customer: 'Công ty An Bình' },
  { id: 2, code: 'DH-0002', customer: 'Tập đoàn Bắc Sơn' },
  { id: 3, code: 'DH-0003', customer: 'Cửa hàng Cường Thịnh' },
]

const search = ref('')
const dataSource = ref<Order[]>(ALL)
const loading = ref(false)

function onSearch(value: string) {
  const keyword = value.trim().toLowerCase()
  dataSource.value = keyword
    ? ALL.filter((o) => `${o.code} ${o.customer}`.toLowerCase().includes(keyword))
    : ALL
}

function onReload() {
  loading.value = true
  setTimeout(() => (loading.value = false), 900)
}
</script>

<template>
  <CTable
    v-model:search-value="search"
    title="Đơn hàng"
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="false"
    show-create
    create-text="Tạo đơn"
    show-search
    show-filter
    show-export
    show-reload
    show-column-setting
    @create="message.info('Mở form tạo đơn')"
    @search="onSearch"
    @filter="message.info('Trang tự mở drawer lọc riêng')"
    @export="message.info('Xuất dữ liệu')"
    @reload="onReload"
  >
    <template #toolbar>
      <CButton
        variant="outline"
        size="sm"
      >
        Nhập từ Excel
      </CButton>
    </template>
  </CTable>
</template>

Các nút

Prop	Hiển thị	Sự kiện	Ghi chú
show-create	Nút primary "Thêm mới"	@create	Đổi nhãn bằng create-text
show-search	Ô tìm kiếm có nút xoá	@search(value) + v-model:search-value	Phát khi nhấn Enter hoặc bấm nút xoá — không tự debounce
show-filter	Nút "Lọc"	@filter	Có filter-fields thì mở drawer dựng sẵn thay vì chỉ phát sự kiện
show-export	Nút tròn tải xuống	@export
show-reload	Nút tròn tải lại	@reload	Icon tự xoay khi bảng đang loading
show-column-setting	Nút tròn ⚙	—	Mở drawer Thiết lập

<CTable
  v-model:search-value="keyword"
  :show-create="can('/orders/create')"
  create-text="Tạo đơn"
  show-search
  show-export
  show-reload
  @create="navigateTo('/orders/new')"
  @search="onSearch"
  @export="exportExcel"
  @reload="reload"
/>

Chặn quyền bằng cách bind thẳng vào prop (:show-create="can(...)") — nút không có quyền thì không tồn tại, thay vì hiện rồi báo lỗi khi bấm.

Ô tìm kiếm

const keyword = ref('')

function onSearch(value: string) {
  // Gộp vào bộ lọc rồi để useTable tải lại từ trang 1.
  onFilter({ ...filterValues.value, keyword: value || undefined })
}

• v-model:search-value giữ chữ đang gõ; @search phát khi người dùng xác nhận (Enter) hoặc xoá trắng ô.
• Không có debounce sẵn: gõ tới đâu gọi API tới đó là quyết định của trang. Cần thì tự debounce, và nhớ huỷ lời gọi cũ — xem useApi và fetcher.
• Khoá gửi lên backend (keyword, q, search…) do trang đặt, CTable không quy định.

Nút riêng của trang

<template #toolbar>
  <CButton variant="outline" size="sm" @click="importExcel">Nhập từ Excel</CButton>
</template>

Slot #toolbar chèn vào đầu dải nút, trước "Thêm mới". Giữ tối đa một hai nút — toolbar dài làm mất nút chính trên màn hình hẹp; hành động ít dùng nên nằm trong menu ⋮ của từng dòng hoặc trong CPageHeader.

Tiêu đề bảng

<CTable title="Đơn hàng" />

hoặc tuỳ biến hoàn toàn:

<template #title>
  <span style="display: inline-flex; gap: 8px; align-items: center">
    Đơn hàng
    <CTag color="info">{{ total }} bản ghi</CTag>
  </span>
</template>

Trang danh sách thường đã có CPageHeader ở đầu trang; khi đó bảng có thể bỏ title cho đỡ lặp, hoặc dùng title để nói rõ phạm vi đang xem ("Đơn hàng chờ duyệt").

Bảng thu gọn được

<CTable title="Mặt hàng" collapsible :default-open="false" />

Toolbar nằm trong header của khối thu gọn; CTable đã chặn sự kiện của nút để bấm nút không làm thu gọn bảng.

Liên quan

• Lọc và tìm kiếm — drawer lọc dựng sẵn.
• Thiết lập bảng — nút ⚙.
• Chặn theo quyền — ẩn nút theo quyền.