问题描述:第一次点击弹框时,数据正常回显。关闭弹框后再次打开,数据是正确的,但是组件显示的是一次的数据。

 前端代码:

            <el-form-item label="间隔" prop="simplify" label-width="90px">

              <el-time-select

                style="width:100%"

                v-model="siteForm.simplify"

                :picker-options="{

                  start: '00:30',

                  step: '00:30',

                  end: '24:00'

                }"

                placeholder="选择时间"

                :clearable="false"

                >

              </el-time-select>

            </el-form-item>

解决方法:由上图可见下拉框能显示正确数据,是数据响应到了,但是文本框采用了就地复用原则,没有重新渲染dom导致,所以只要给el-form-item加上key就行了。

            <el-form-item label="间隔" prop="simplify" label-width="90px" :key="siteForm.simplify">

              <el-time-select

                style="width:100%"

                v-model="siteForm.simplify"

                :picker-options="{

                  start: '00:30',

                  step: '00:30',

                  end: '24:00'

                }"

                placeholder="选择时间"

                :clearable="false"

                >

              </el-time-select>

            </el-form-item>

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐