bab-icon/resources/js/components/UiLinkage.vue

<template>
	<el-row class="form-group">
		<el-col :span="3" style="min-height:50px;padding-top:10px;">
			<label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Select'}}</label>
		</el-col>
		<!-- 一级菜单 -->
		<el-col :span="7">
			<el-select :id="one_name+'_select'" v-model="one_id" :multiple="multiple ? true : false" :disabled="disabled ? true : false"
			 :size="size ? size : 'large'" :clearable="clearable ? true : false" :multiple-limit="multipleLimit ? multiple-limit : 0"
			 :placeholder="placeholder ? placeholder : '请选择'" @change="selectChange(one_id,'one_name')">
				<el-option v-for="one_item in one_data" :key="one_item.value" :label="one_item.label" :value="one_item.value+''">
					<span style="float: left">{{one_item.label}}</span>
					<span style="float: right; color: #8492a6; font-size: 13px">{{one_item.notice?one_item.notice:one_item.value}}</span>
				</el-option>
			</el-select>
			<input type='text' :name="one_name?one_name:'select_one'" :id="one_name" class="ui-input-select-el-col-select"
			 :value="one_id" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)">
		</el-col>

		<!-- 二级菜单 -->
		<el-col :span="7" v-show="one_id>0 && tier*1>=2">
			<el-select :id="two_name+'_select'" v-model="two_id" :multiple="multiple ? true : false" :disabled="disabled ? true : false"
			 :size="size ? size : 'large'" :clearable="clearable ? true : false" :multiple-limit="multipleLimit ? multiple-limit : 0"
			 :placeholder="placeholder ? placeholder : '请选择'" @change="selectChange(two_id,'two_name')">
				<el-option v-for="two_item in two_data" :key="two_item.value" :label="two_item.label" :value="two_item.value+''">
					<span style="float: left">{{two_item.label}}</span>
					<span style="float: right; color: #8492a6; font-size: 13px">{{two_item.notice?two_item.notice:two_item.value}}</span>
				</el-option>
			</el-select>
			<input type='text' :name="two_name?two_name:'select_two'" :id="two_name" class="ui-input-select-el-col-select"
			 :value="two_id" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)">
		</el-col>

		<!-- 三级菜单 -->
		<el-col :span="7" v-show="two_id>0 && three_data.length>1 && tier*1>=3">
			<el-select :id="three_name+'_select'" v-model="three_id" :multiple="multiple ? true : false" :disabled="disabled ? true : false"
			 :size="size ? size : 'large'" :clearable="clearable ? true : false" :multiple-limit="multipleLimit ? multiple-limit : 0"
			 :placeholder="placeholder ? placeholder : '请选择'" @change="selectChange(three_id,'three_name')">
				<el-option v-for="three_item in three_data" :key="three_item.value" :label="three_item.label" :value="three_item.value+''">
					<span style="float: left">{{three_item.label}}</span>
					<span style="float: right; color: #8492a6; font-size: 13px">{{three_item.notice?three_item.notice:three_item.value}}</span>
				</el-option>
			</el-select>
			<input type='text' :name="three_name?three_name:'select_three'" :id="three_name" class="ui-input-select-el-col-select"
			 :value="three_id" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)">
		</el-col>



	</el-row>
</template>

<script>
	export default {
		props: ['label', 'multiple', 'disabled', 'size', 'clearable', 'multipleLimit', 'name', 'placeholder', 'free', 'tips',
			'options','tier_num'
		],
		data() {

			return {
			    'tier':this._props.options.tier_num ? this._props.options.tier_num : 3,
				'one_id': this._props.options.one_id ? this._props.options.one_id : '0',
				'two_id': this._props.options.two_id ? this._props.options.two_id : '0',
				'three_id': this._props.options.three_id ? this._props.options.three_id : '0',
				'send_url': this._props.options.send_url ? this._props.options.send_url : '',
				'one_name': this._props.options.one_name ? this._props.options.one_name : 'one_name',
				'two_name': this._props.options.two_name ? this._props.options.two_name : 'two_name',
				'three_name': this._props.options.three_name ? this._props.options.three_name : 'three_name',
				'one_data': [{
					"value": '0',
					"label": "请选择",
					"disabled": false,
					"notice": "*"
				}],
				'two_data': [{
					"value": '0',
					"label": "请选择",
					"disabled": false,
					"notice": "*"
				}],
				'three_data': [{
					"value": '0',
					"label": "请选择",
					"disabled": false,
					"notice": "*"
				}],
			};
		},
		mounted() {
			if (this._props.multiple) {
				$(document).find('#select-ui-' + this._props.name + ' input.el-input__inner').css({
					color: 'rgba(255,255,255,0)'
				});
				if (this._props.options.checked) {
					this.setData(this._props.options.checked);
				}
			}
		},
		methods: {
			selectChange(value, key_name) {

				this.setData(value, key_name);
				if (key_name == 'one_name') {
					this.getDataList('two_name',0);
					this.two_data = [{
						"value": '0',
						"label": "请选择",
						"disabled": false,
						"notice": "*"
					}];
					this.two_id = 0
				} else if (key_name == 'two_name') {
					this.getDataList('three_name',0);
					this.three_data = [{
						"value":  '0',
						"label": "请选择",
						"disabled": false,
						"notice": "*"
					}];
					this.three_id = 0
				}
			},
			setData(value, key_name) {
				var select_name = this._props[key_name];
				 this.$emit('set-keys',value,key_name);
				console.log('选择值:' + value);
				
                console.log('触发值:' + value);
				$(document).find('input#' + select_name).val(value+'');
				$(document).find('input#' + select_name ).trigger("change");
				if (key_name == 'one_name') {
					this.one_id = value;
				} else if (key_name == 'two_name') {
					this.two_id = value;
				}else{
					this.three_id = value;
				}
			},
			getDataList(key_name,select_id) {
				var p_id = 0;
				if (key_name == 'two_name') {
					p_id = this.one_id;
					if(p_id*1<=0)return false;
				} else if (key_name == 'three_name') {
					p_id = this.two_id;
					if(p_id*1<=0)return false;
				} 
				var linkage_vue = this;
				$.ajax({
					type: 'post',
					url: this.send_url,
					data: {
						'p_id': p_id,
						'select_id': select_id
					},
					dataType: 'json',
					success: function(msg) {
						if (msg.status * 1 == 1) {
							if (key_name == 'two_name') {
								linkage_vue.two_data = msg.data;
							} else if (key_name == 'three_name') {
								linkage_vue.three_data = msg.data;
							} else {
								linkage_vue.one_data = msg.data;
							}
							console.log(key_name);
							linkage_vue.setData(select_id, key_name)

						}
					},
					error: function() {
						layer.msg('服务器繁忙,请稍后再试!!!', {
							icon: 3,
							time: 2000
						});
					}
				});
			}
		},
		watch: {
            '_props.options.tier_num':function(){
                console.log('获取到父级数据变化:' + this._props.options.tier_num);
                this.tier=this._props.options.tier_num;
            }
		},
		created() {
			this.getDataList('one_name',this._props.options.one_id);
			if (this._props.options.one_id > 0) {
				this.getDataList('two_name',this._props.options.two_id);
			}
			if (this._props.options.two_id > 0) {
				this.getDataList('three_name',this._props.options.three_id);
			}
		}
	}
</script>

<style scoped>
	.classJs {
		margin-left: 10px;
		vertical-align: middle;
		height: 42px;
		line-height: 42px;
	}

	.red {
		color: red;
	}
</style>