Vue项目中element-ui下拉框无法选中的解决方法

<强>解决方法:

出现这个问题好像是因为下拉框数据是循环掉别的接口得来的,因为数据层次太多,呈现函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新渲染。

写一个方法,在选择的改变事件中调用此方法,运用。美元forceUpdate()强制刷新,页面正常选值。

 
 
下拉框代码如下:
  & lt; el-form-item道具=癱zfaIds"标签=按χ梅桨浮氨?
　　& lt; el-select v模型=癴orm.czfaIds"多个占位符=扒胙≡瘛?,可清除的:禁用=皊howControl"的在
　　& lt; el-option
　　v代表=癱zfas"项目;
　　:关键=癷tem.value"
　　:标签=癷tem.wsdFamc"
　　:价值=https://www.yisu.com/zixun/癷tem.id”/>
　　
　　 

下拉框中的数据源czfas是一个数组,选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的,所以在编辑界面从后端获取的返回值是一个字符串,首选要把这个字符串转换成数组,绑定到选择的v模型属性上。

代码如下:

//编辑
　　queryEditRow(指数、行){
　　这一点。titleInfo=& # 39;编辑& # 39;
　　这一点。dialogVisible=true
　　这一点。形式=对象。行分配({})//将字符串转换成数组,绑定到选择控件的v模型属性上
　　this.form。czfaIds=row.czfaIds.split (& # 39; & # 39;)
　　
　　这一点。showbtn=true
　　这一点。showControl=false
　　},

但是发现还是有问题,显示的是选中的方案的id值,而且没有将选择的选项选中。

如下图:

分析:选择选择器对数据的显示,是匹配到选择下拉框数据源中对应的价值值时则会显示相应的标签;若是没有匹配到,则显示的是该价值。

显然,这里是因为没有匹配到下拉框中值的值,直接显示的这个字段的值。

在浏览器控制台中输出数据源的数据:

在浏览器控制台输出返回的字符串转换成数组后的值:

发现选择下拉框中的id和v型里边绑定的id的数据类型不一致,虽然数据的值是一样的,但是一个是字符串,一个是整型数值。将后端返回的字符串在转换成数组时,转换成整形数组,下拉框即可正确显示。

代码如下:

//编辑
　　queryEditRow(指数、行){
　　这一点。titleInfo=& # 39;编辑& # 39;
　　这一点。dialogVisible=true
　　这一点。形式=对象。行分配({})//将字符串转换成数组,此时是字符串数组
　　var arrStringCzfaIds=row.czfaIds.split (& # 39; & # 39;)//将字符串数组的每一项转换成数字,生成一个新的数组
　　var arrIntCzfaIds=[]
　　(var arrInt arrStringCzfaIds) {
　　arrIntCzfaIds.push(方法(arrStringCzfaIds [arrInt]))
　　}//将新数的数字组,绑定到选择空间的v模型上
　　this.form。czfaIds=arrIntCzfaIds
　　
　　这一点。showbtn=true
　　这一点。showControl=false
　　},
Vue项目中element-ui下拉框无法选中的解决方法