Trong dự án, ban đầu chúng ta chỉ hiển thị dữ liệu cấp tỉnh. Tuy nhiên theo yêu cầu mới, cần phải xác định đến cấp huyện.

Bạn có thể sử dụng组件 Cascader của Ant Design Vue để thực hiện chức năng này. Dữ liệu sẽ được tải từ server theo từng cấp thông qua các API:

<a-form-model-item
  prop="projectTinhThanh"
  ref="projectTinhThanh"
  :labelCol="{ span: 10 }"
  :wrapperCol="{ span: 12 }"
  label="Vị trí dự án:"
>
  <a-tooltip>
    <template #title> Vị trí dự án </template>
    <a-cascader
      :allowClear="false"
      :options="optionsTinhThanh"
      v-model="form.projectTinhThanh"
      placeholder="Chọn区域"
      :loadData="loadDuLieuKhuVuc"
      @change="onThayDoiKhuVuc"
      :getPopupContainer="(trigger) => {return trigger.parentElement}"
    >
    </a-cascader>
  </a-tooltip>
</a-form-model-item>

Phương thức khởi tạo dữ liệu:

async mounted() {
  this.loadData();
  const data = await this.getTinhThanhList();
  this.optionsTinhThanh = data.map(item => {
    item.leaf = false;
    return item;
  });
}

Phương thức xử lý lazy loading:

// Lấy danh sách tỉnh
getTinhThanhList(code) {
  return new Promise((resolve, reject) => {
    code = -1;
    publicapi.getAllTinhThanhLazy(code).then(res => {
      if (res.data) {
        let arr = res.data.map(item => {
          return {
            value: item.id,
            label: item.tenTinhThanh,
            isLeaf: item.leaf
          }
        });
        resolve(arr);
      } else {
        resolve([]);
      }
    }).catch(err => {
      reject(err);
    });
  });
},

// Tải dữ liệu cho cấp tiếp theo
async loadDuLieuKhuVuc(selectedOptions) {
  if (!this.optionsTinhThanh.length) {
    this.optionsTinhThanh = await this.getTinhThanhList() || [];
  } else {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    const data = await publicapi.getAllTinhThanhLazy(targetOption.value);
    console.log(data, 'targetOption.value', targetOption.value);
    
    if (data.data.length) {
      for (let i = 0; i < data.data.length; i++) {
        const element = data.data[i];
        if (element.children) { delete element.children; }
        element.value = element.id;
        element.isLeaf = false;
      }
      targetOption.loading = false;
      targetOption.children = [...data.data];
      this.optionsTinhThanh = JSON.parse(JSON.stringify(this.optionsTinhThanh));
    } else {
      targetOption.loading = false;
      targetOption.isLeaf = true;
    }
  }
},

// Xử lý khi người dùng thay đổi lựa chọn
onThayDoiKhuVuc(val, selectedOptions) {
  console.log(val, selectedOptions, 'val, selectedOptions');
},

So sánh với cách triển khai không sử dụng lazy loading:

<a-cascader 
  :options="optionsTinhThanh" 
  v-model="form.projectTinhThanh"
  placeholder="Chọn区域" 
  @change="onThayDoiKhuVuc" 
  :fieldNames="{label: 'label', value: 'id', children: 'children'}"
  :getPopupContainer="(trigger) => {return trigger.parentElement}"
/>

Bạn có thể tùy chỉnh các trường dữ liệu thông qua thuộc tính fieldNames của组件 Cascader.

Dữ liệu trả về từ server: