Trong bài viết này, chúng ta sẽ triển khai một bảng dữ liệu với header cố định và giao diện trạng thái rỗng tùy chỉnh trong Vue 3. Đây là một phần trong chuỗi bài hướng dẫn xây dựng hệ thống bảng dữ liệu hoàn chỉnh.

Giao diện hoàn chỉnh

Mã nguồn component

<!-- TableView14_10.vue -->
<template>
  <div class="table-demo">
    <h2>10. Bảng có header cố định và trạng thái rỗng</h2>
    <p class="description">Hiển thị nội dung trạng thái rỗng tùy chỉnh</p>
    <div class="table-container">
      <Table
        :data="[]"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        empty-text="Không có dữ liệu"
      >
        <template #empty>
          <div class="empty-content">
            <i class="empty-icon">📭</i>
            <p class="empty-text">Không tìm thấy dữ liệu phù hợp</p>
            <button class="reload-btn" @click="loadData">Tải dữ liệu</button>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

const columns = ref([
  { title: 'Họ tên', dataIndex: 'name', width: '120px' },
  { title: 'Tuổi', dataIndex: 'age', width: '80px' },
  { title: 'Thành phố', dataIndex: 'city', width: '120px' },
  { title: 'Cấp độ thành viên', dataIndex: 'level', width: '120px' }
])

const loadData = () => {
  console.log('Cần viết mã tải dữ liệu')
}
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.empty-content {
  padding: 32px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
}

.empty-text {
  margin: 16px 0;
  color: #909399;
}

.reload-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.reload-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
</style>

Kiểm thử

Component hoạt động chính xác. Bảng hiển thị đúng giao diện trạng thái rỗng với nút tải lại dữ liệu.

Cấu hình định tuyến

Thêm route mới trong file src/router/index.js:

{
  path: '/table14_10',
  name: 'table14_10',
  component: () => import('../views/TableView14_10.vue')
}

Thêm vào App.vue

Thêm liên kết điều hướng trong template của src/App.vue:

<RouterLink to="/table14_10">table14_10</RouterLink>

Hiệu suất và triển vọng

Về hiệu suất, DeepSeek có tốc độ suy luận nhanh, phù hợp với các tác vụ yêu cầu phản hồi tức thời. Trong kịch bản chatbot hỗ trợ khách hàng, DeepSeek có thể nhanh chóng hiểu câu hỏi và đưa ra câu trả lời chính xác, giảm đáng kể thời gian chờ đợi của người dùng. Trong khi đó, ChatGPT dù có khả năng xử lý các tác vụ phức tạp và đưa ra câu trả lời toàn diện hơn nhưng thời gian phản hồi thường lâu hơn.