前言

有了需要改动祖传代码项目需求：把之前的select改成二级联动。项目使用了ant-design-vue，数据为[{"id":1,"name":"前端开发"}]

问题描述

<a-form :form="form" @submit="handleCreateMenuSubmit">
							<a-select style="width:50%" placeholder="请选择技术领域" @change="handleNoteCategoryChange">
								<a-select-option v-for="item in note_category" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
							<a-select style="width:50%" placeholder="请选择分类" ref="note_category2" @change="handleNoteCategoryChange2">
								<a-select-option v-for="item in note_category2" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
							<a-form-item label="简介">
								<a-textarea
									placeholder="如：产品设计与研发"
									v-decorator="['description']"
									:auto-size="{ minRows: 2, maxRows: 4 }"
								/>
							</a-form-item>
						</a-form>

 

handleNoteCategoryChange(value, option) {
	Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
		pid: value
	})
	.then((res) => {
		if (res.data.code == 1) {
			this.note_category2 = res.data.data;
		} else if(res.data.code == 0) {
			this.note_category2 = [];//获取成功，但是数据为空
            this.note_category2Id = -1,
		} else {
			this.$message.error(res.data.msg);
		}
	})
	.catch(() => this.$message.error('请检查网络后重试'));
},
handleNoteCategoryChange2(value, option) {
	this.note_category2Id = value;
},

//-------------------------------
data(){
    return {
        note_category: [],
        note_category2: [], 
        note_category2Id: -1,
    }
}

 当我切换了一级下拉框，二级下拉框的数据也重新赋值啦，但是二级下拉框选中的文本依旧没有改变。

第一次选了一级“前端开发”，选择了二级“百度小程序”，此时切换一级为“数据库”，二级的数据被重新赋值，但是此时二级的文本依然是之前选择的“百度小程序”。

解决方案

首先怀疑是属于特殊方法操作了数组，导致无法更新数据到UI，于是使用this.$forceUpdate()强制渲染。但是结果不如意，没效果。

然后使用了this.$set(this.note_category2,0,{"id":0,"name":"请选择分类"})，但是依然没有效果。

难受，使用了最原始简单暴力的方法，直接修改文本吧。代码如下：

		handleNoteCategoryChange(value, option) {
			console.log(value);
			// 获取note_category笔记分类
			Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
				pid: value
			})
			.then((res) => {
				if (res.data.code == 1) {
					this.note_category2 = res.data.data;
				} else if(res.data.code == 0) {
					this.note_category2 = [];
					this.note_category2Id = -1;
					if (this.$refs.note_category2.$el.children[0].children[0].children[1]) {
this.$refs.note_category2.$el.children[0].children[0].children[1].innerText = '请选择分类';
					}
				} else {
					this.$message.error(res.data.msg);
				}
			})
			.catch(() => this.$message.error('请检查网络后重试'));
		},

不愉快的收工。不知道大家有没有遇到这样的问题，最后还望大家给出更好的方案解决！