Tạo thành phần chọn tỉnh - thành phố - quận huyện dựa trên element-china-area-data trong backpack
Ngày cập nhật: 2019-03-26 | Số lần xem: 9104 | Số từ: 266 | Phân loại: Backpack
Tìm kiếm
Do việc sử dụng thư viện element-china-area-data, để hiển thị đầy đủ thông tin về địa phương, bạn cần cung cấp ba ID là của tỉnh, thành phố và quận huyện. Vì vậy, chúng tôi đã bổ sung thêm hai trường sau:
Trong khi đó, trường county_name được thêm vào nhằm mục đích lưu trữ tên tiếng Trung của các đơn vị hành chính như tỉnh, thành phố và quận huyện, giúp việc hiển thị trở nên trực quan hơn.
Kết quả giao diện được minh họa như hình bên dưới (ảnh không đi kèm).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<div @include('crud::inc.field_wrapper_attributes') id="county_picker">
<input ref="county_id" type="hidden" name="county_id" value="{{ old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' )) }}">
<label>{!! $field['label'] !!}</label>
@include('crud::inc.field_translatable_icon')
<div>
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
{{-- HƯỚNG DẪN --}}
@if (isset($field['hint']))
<p class="help-block">{!! $field['hint'] !!}</p>
@endif
</div>
{{-- ########################################## --}}
{{-- CSS và JS bổ sung cho trường này --}}
{{-- Nếu có nhiều trường cùng loại trên một form thì chỉ tải một lần --}}
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))
{{-- CSS cho trường --}}
@push('crud_fields_styles')
<link rel="stylesheet" href="
@endpush
{{-- JS cho trường --}}
@push('crud_fields_scripts')
<script src="
<script src="
<script src="
@endpush
@endif
@push('crud_fields_scripts')
<script>
var province_id = $("input[name=province_id]");
var city_id = $("input[name=city_id]");
var county_name = $("input[name=county_name]");
new Vue({
el: "#county_picker",
data: {
options: regionData,
selectedOptions: []
},
mounted: function() {
this.selectedOptions = [
province_id.val(),
city_id.val(),
this.$refs.county_id.value,
];
},
watch: {
},
methods: {
handleChange (value) {
province_id.val(value[0]);
city_id.val(value[1]);
this.$refs.county_id.value = value[2];
county_name.val(CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]);
}
}
});
</script>
@endpush
{{-- Kết thúc phần CSS và JS bổ sung --}}
|
Giải thích chi tiết
Thành phần này sử dụng thư viện Element UI kết hợp với dữ liệu địa lý Trung Quốc từ element-china-area-data để tạo ra một trình lựa chọn địa phương gồm ba cấp: tỉnh/thành phố, quận/huyện. Khi người dùng thay đổi lựa chọn, giá trị tương ứng sẽ được cập nhật vào các trường ẩn (province_id, city_id, county_id) và tên địa phương sẽ được chuyển đổi thành văn bản Tiếng Trung bằng hàm CodeToText.
Đây là giải pháp rất hữu ích trong các hệ thống quản lý nội dung (CMS), đặc biệt khi yêu cầu nhập địa danh theo chuẩn quốc tế hoặc xử lý dữ liệu đa ngôn ngữ.
Bạn có thể tùy chỉnh thêm giao diện hoặc logic xử lý theo nhu cầu cụ thể của mình.