Xử lý hiển thị hình ảnh trong bảng dữ liệu

Để hiển thị hình ảnh sản phẩm hoặc avatar trong các cột của bảng, cần thiết lập hàm trợ giúp để chuyển đổi đường dẫn tương đối thành URL đầy đủ. Đầu tiên, import hàm xử lý đường dẫn từ module quản lý API:

import { buildResourceUrl } from '@/utils/request'

Tiếp theo, định nghĩa phương thức trong phần methods để trả về đường dẫn hoàn chỉnh cho hình ảnh:

methods: {
  resolveImagePath(imagePath) {
    if (!imagePath) return ''
    return buildResourceUrl(imagePath)
  }
}

Trong cấu hình cột của bảng, sử dụng scopedSlots để tùy chỉnh cách hiển thị cho cột chứa hình ảnh:

const columns = [
  {
    title: 'Hình ảnh',
    dataIndex: 'productImage',
    align: 'center',
    scopedSlots: { customRender: 'imageSlot' }
  }
]

Tại phần template, định nghĩa khe cắm (slot) để render thẻ a-avatar hoặc thẻ img thông thường. Cần kiểm tra dữ liệu tồn tại trước khi hiển thị:

<template slot="imageSlot" slot-scope="text, record">
  <div v-if="record.productImage" style="display: inline-block;">
    <a-image
      :src="resolveImagePath(record.productImage)"
      :width="80"
      :height="80"
      shape="square"
    />
  </div>
  <span v-else>Không có</span>
</template>

Thêm tùy chọn tìm kiếm động từ API

Trong các form tìm kiếm, thường cần các dropdown list được tải từ server về. Khai báo biến lưu trữ danh sách tùy chọn trong data:

data() {
  return {
    departmentOptions: [],
    queryParam: {
      departmentId: undefined
    }
  }
}

Tạo phương thức để gọi API lấy danh sách và gán vào biến cục bộ. Xử lý cả trường hợp thành công và thất bại:

methods: {
  async loadDepartmentList() {
    try {
      const response = await fetchDepartmentList()
      if (response.success) {
        this.departmentOptions = response.data.list || []
      }
    } catch (error) {
      console.error('Lỗi khi tải danh sách đơn vị:', error)
    }
  }
}

Gọi phương thức khởi tạo trong hook vòng đời created hoặc mounted:

created() {
  this.loadDepartmentList()
}

Áp dụng vào component a-select trong form tìm kiếm. Sử dụng v-for để render các option từ danh sách đã tải:

<a-col :span="6">
  <a-form-item label="Đơn vị thuộc">
    <a-select
      v-model="queryParam.departmentId"
      placeholder="Chọn đơn vị"
      allowClear
    >
      <a-select-option
        v-for="item in departmentOptions"
        :key="item.id"
        :value="item.id"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
  </a-form-item>
</a-col>

Tải dữ liệu cây phân cấp cho Modal

Khi làm việc với các danh mục hàng hóa có cấu trúc cây, cần chuyển đổi dữ liệu từ API sang định dạng mà component Tree của Ant Design hiểu được. Định nghĩa hàm tải dữ liệu:

methods: {
  initCategoryTree() {
    const self = this
    fetchCategoryStructure().then(res => {
      if (res.success) {
        const sourceList = res.result.treeList || []
        self.categoryNodes = sourceList.map(node => ({
          ...node,
          isLeaf: node.leaf === true,
          key: node.id,
          value: node.id,
          title: node.categoryName
        }))
      }
    })
  }
}

Dữ liệu sau khi chuyển đổi sẽ được binding vào thuộc tính tree-data của component a-tree hoặc a-tree-select trong modal.

Xử lý xóa giá trị trên thành phần chọn ngày

Đối với các component chọn ngày như a-date-picker hoặc a-range-picker, việc làm trống giá trị đã chọn có thể thực hiện bằng cách gán biến liên kết (v-model) về null hoặc undefined. Nếu sử dụng phương thức reset form của Ant Design, cần đảm bảo trường ngày tháng được khai báo đúng trong danh sách fields cần reset. Trong trường hợp điều khiển thủ công, chỉ cần cập nhật lại data property liên kết thành giá trị rỗng.