问题:
当前端要展示二级联动效果,或者多级联动。
问题1:我们点击一级下拉框的数据时,二级数据不能展示到二级下拉框
问题2:或者点击一级下拉框的数据时,二级数据能展示到二级下拉框,但点击二级下拉框的数据时,不能展示到页面
解决思路:
实质就是数据层级太深,我们一次性从后端拿到二级的全部数据,当数据改变后,视图没有重新渲染,所以要强制刷新视图,重新渲染,这个比较消耗性能。
解决方法:
给二级下拉框绑定一个 @change="linkChange()"事件,调用 this.$forceUpdate()来强制刷新
<!-- 二级分类 --> <el-select v-model="sightsInfo.classifyId" placeholder="请选择" @change="linkChange()" > <el-option v-for="classifyTwo in classifyTwoList" :key="classifyTwo.id" :label="classifyTwo.title" :value="classifyTwo.id" no-data-text /> </el-select>
绑定方法:
methods: { linkChange() { this.$forceUpdate() } },
下拉框完整代码
<!-- 所属分类 TODO -->
<el-form-item label="景点城市">
<!-- 一级分类 -->
<el-select
v-model="sightsInfo.classifyParentId"
placeholder="请选择"
@change="classifyLevelOneChanged"
>
<el-option
v-for="classifyOne in classifyOneList"
:key="classifyOne.id"
:label="classifyOne.title"
:value="classifyOne.id"
/>
</el-select>
<!-- 二级分类 -->
<el-select
v-model="sightsInfo.classifyId"
placeholder="请选择"
@change="linkChange()"
>
<el-option
v-for="classifyTwo in classifyTwoList"
:key="classifyTwo.id"
:label="classifyTwo.title"
:value="classifyTwo.id"
no-data-text
/>
</el-select>
</el-form-item>
此方法同样适用于多级联动 ~~~~~