基于 element-china-area-data 的 backpack 省市区选择组件

由于使用的 element-china-area-data 组件，需要提供省市区三个 ID 才能正常显示，所以增加了两个字段

• province_id
  
• city_id
  

而 county_name 是为了缓存省市区的中文名称

效果如图

实现代码

<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>


	{{-- HINT --}}
	@if (isset($field['hint']))
	<p class="help-block">{!! $field['hint'] !!}</p>
	@endif
</div>

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))

{{-- FIELD CSS - will be loaded in the after_styles section --}}
@push('crud_fields_styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.6.3/lib/theme-chalk/index.css">
@endpush

{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.6.3/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-china-area-data@4.1.2/dist/app.min.js"></script>
@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
{{-- End of Extra CSS and JS --}}

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式