JeecgBoot vue 带参跳转新页面赋值后删不掉

最新推荐文章于 2024-01-17 16:10:25 发布

踏浪而行foreval

最新推荐文章于 2024-01-17 16:10:25 发布

阅读量1.1k

点赞数

分类专栏： H5 vue 文章标签： javascript html html5 vue.js

本文链接：https://blog.csdn.net/weixin_45849072/article/details/114024464

版权

vue 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

14 篇文章 2 订阅

订阅专栏

本文探讨了在前端开发中，从A页面跳转到B页面并传递参数planCode时遇到的问题。当在B页面的输入框中显示该参数后，无法正常删除输入内容。解决方案是重写查询和重置功能，确保既能赋值也能清除。通过调整代码，实现了既能显示查询参数又能允许用户编辑和删除的输入框功能，提升了用户体验。

摘要由CSDN通过智能技术生成

假设从A页面跳转到B页面，传递参数为planCode

B页面被赋值的input可以显示新值，但是删不掉，进行删除的时候光标常亮不闪；不删除时，光标有规律闪动，这可不行，只能赋值不能删除不能满足需求怎么办呢？

开始接下来的探索

// A页面
this.$router.push({
    path:'/checkManage/WmsCheckRecordList',
    query:{
        planCode:planCode1
    }
})

// JeecgListMixin   created
// 这里只负责提交时的参数提交，不负责页面展示
if (this.$route.query.planCode!=undefined){
  this.queryParam.planCode = this.planNos = this.$route.query.planCode
  this.searchQuery()
  return false
}

// B页面
<a-col :xl="6" :lg="7" :md="8" :sm="24">
    <a-form-item label="盘点计划编号">
        <a-input placeholder="请输入盘点计划编号" v-model="queryParams.planCode"></a-input>
    </a-form-item>
</a-col>

queryParams:{
    planCode:'',
    checkRecordResult:''
}
// created
if(decodeURI(location.href).split('?')[1] != null){        // 如果url上没有参数时
    // 这里的赋值只负责显示，提交时传不上值
    this.queryParams.planCode = this.$route.query.planCode
}
this.searchQuery()

页面的‘查询’和‘重置’的功能需要重写一下但是赋值之后不能删除的问题到此就解决啦

肯定还有更方便高效的方法，欢迎大家在评论区讨论