Để hiển thị các biểu tượng hoặc hình ảnh bên cạnh các mục trong danh sách chọn của Van-Picker, chúng ta có thể sửa đổi dữ liệu hiển thị bằng cách chèn thẻ <img> vào trước tên của mỗi tùy chọn.

Nguyên tắc hoạt động: Ghép một thẻ <img> vào phía trước tên hiển thị của mỗi mục.

Cấu trúc giao diện người dùng (HTML):

<van-field
  readonly
  is-link
  name="picker"
  :value="selectedValue"
  clearable
  label="Chọn ngân hàng của bạn"
  placeholder="Chọn ngân hàng"
  input-align="right"
  :rules="[{ required: true, message: 'Vui lòng chọn ngân hàng' }]"
  @click="showPickerPopup = true"
/>

<van-popup v-model="showPickerPopup" position="bottom">
  <van-picker
    show-toolbar
    :columns="pickerColumns"
    @confirm="handleConfirmSelection"
    @cancel="showPickerPopup = false"
  />
</van-popup>

Logic xử lý dữ liệu (JavaScript/Vue):

import bankIcon1 from '@/assets/bank_icon_1.png'; // Điều chỉnh đường dẫn theo cấu trúc dự án của bạn
import bankIcon2 from '@/assets/bank_icon_2.png';
import bankIcon3 from '@/assets/bank_icon_3.png';

export default {
  data() {
    return {
      bankList: [
        {
          "code": "1",
          "bankName": "ธ.ก.ส."
        },
        {
          "code": "2",
          "bankName": "กรุงศรี"
        },
        {
          "code": "3",
          "bankName": "กรุงเทพ"
        }
      ],
      iconSources: [bankIcon1, bankIcon2, bankIcon3],
      pickerColumns: [],
      selectedValue: null,
      showPickerPopup: false
    };
  },
  created() {
    // Tạo bản sao để tránh thay đổi mảng gốc khi thêm thẻ img
    this.pickerColumns = this.deepClone(this.bankList);

    this.pickerColumns.forEach((item, index) => {
      // Kiểm tra xem có đủ icon cho tất cả các ngân hàng không
      if (this.iconSources[index]) {
        item.bankName = `<img style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;" src='${this.iconSources[index]}'>` + item.bankName;
      }
    });
  },
  methods: {
    // Hàm sao chép sâu đối tượng
    deepClone(obj) {
      if (obj === null) return null;
      if (typeof obj !== "object") return obj;
      if (obj.constructor === Date) return new Date(obj);

      var clonedObj = new obj.constructor();
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          var val = obj[key];
          clonedObj[key] = (typeof val === "object" && val !== null) ? this.deepClone(val) : val;
        }
      }
      return clonedObj;
    },
    handleConfirmSelection(value) {
      // Loại bỏ thẻ HTML khỏi giá trị đã chọn trước khi gán vào input
      const cleanValue = value.replace(/<[^>]+>/g, "");
      this.selectedValue = cleanValue;
      this.showPickerPopup = false;
    }
  }
};

Xử lý sau khi chọn:

Khi người dùng chọn một mục từ Van-Picker, giá trị trả về sẽ chứa cả thẻ <img> đã được thêm vào. Vì trường input (van-field) không thể hiển thị thẻ HTML, chúng ta cần loại bỏ các thẻ này khỏi giá trị trước khi cập nhật vào state.

    // Trong phương thức handleConfirmSelection:
    // ...
    const cleanValue = value.replace(/<[^>]+>/g, ""); // Sử dụng regex để loại bỏ tất cả các thẻ HTML
    this.selectedValue = cleanValue;
    this.showPickerPopup = false;
    // ...

Sau khi thực hiện các bước trên, bạn sẽ có thể hiển thị hình ảnh bên cạnh các tùy chọn trong Van-Picker và xử lý giá trị đã chọn một cách chính xác.