一、 问题描述
使用el-cascader级联框,在添加默认值,v-model绑定的值是修改到了,但是input不显示,还是显示的无内容时候会出现的placeholder
二、 解决过程
1、 查阅度娘之后,发现可能是数据修改的时候,级联的options的绑定数据还没请求下来,所以首先尝试
this.$forceUpdate()强制更新渲染,很好,没有作用。
2、 看到有网友使用v-if去控制el-cascader级联框,目的也是重新渲染,以求达到回显
代码如下,用v-if+变量,去控制el-cascader的显示,赋值前false,赋值后才赋值为true
![](https://img2020.cnblogs.com/blog/2527107/202109/2527107-20210901192954265-1737556629.png)
结果: 没有作用,失败告终。
3、一番搜索,看到有网友在第二种的基础,想出了一个骚操作,反正都是显示,用个标签叠上去也是显示,
就是先平时隐藏el-cascader级联的输入框,用个标签叠在上面显示,要改值的时候才隐藏这个标签。(比较复杂,我差点就想用这个方法去解决问题了)
4、最终!最骚的操作来了,神来之笔我感觉是的,有老哥用
真的神奇的脑回路,太服气了,直接用placeholder做回显,只要再改改样式,就完全一样了,完美。
三、 心得
1、知晓了el-cascader级联组件在回显的处理可能还有bug(根据国内网友的发言得出,不保证准确性)
2、知晓了问题解决的方法有很多,还有更多更有趣(骚气)的操作,等待我们工程师去发现去探索。
ps: 第一次发博客,不知道写得好不好,如有侵权请私信我,谢谢你的观看!