下拉框二级联动 选中后视图没有渲染等问题解决办法

问题：

当前端要展示二级联动效果，或者多级联动。

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

此方法同样适用于多级联动 ~~~~~