elementui input输入框回显不显示

问题描述:在某个回调事件中,给表单中的某个input赋值(已绑定v-model),input不显示数据且无法编辑,在这个表单的其他input中修改值时,这个被赋值的input才会回显。
解决办法:在回调事件函数中,给input赋值后,强制刷新:this.$forceUpdate();

 

 this.$http.post("/rentRecord/getRechargeStandard", params).then((res) => {
        if (res.status === 0) {
          console.log(JSON.stringify(res.data));
          this.formData.endTime = res.data.endTime;
          this.formData.rechargeMoney = res.data.rechargeMoney;
          this.$forceUpdate();
          console.log("金额" + this.formData.rechargeMoney);
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: elementui tree组件的回显可以通过以下步骤实现: 1. 在tree组件中设置v-model属性,绑定一个数组,用于存储选中的节点数据。 2. 在mounted生命周期中,通过接口请求获取已选中的节点数据,将数据添加到v-model绑定的数组中。 3. 在tree组件中设置default-checked-keys属性,将已选中的节点的key值传入,实现回显。 4. 当用户进行节点选择操作时,需要将选中的节点数据同步到v-model绑定的数组中,以便在下次回显时能够正确显示已选中的节点。 以上是elementui tree组件回显的基本实现方式,具体实现还需要根据具体业务需求进行调整。 ### 回答2: elementui tree组件是一个常用的树形结构组件,常用于展示页面导航、分类、目录等方式。在开发过程中,经常需要将一些数据以树形结构的方式进行展示,而elementui提供了tree组件来实现这种需求。如果想要实现回显的效果,需要对tree组件进行一些操作。 首先,需要创建一个tree组件,用来展示需要回显的数据。在组件的data属性中定义一个树形结构数组,来保存需要展示的节点信息。同时,定义一个checkedKeys属性,用来保存已选中的节点信息。这样,当tree组件渲染时,会将已选中的节点标记为选中状态,并展示在页面上。 接下来,需要在mounted生命周期方法中,获取需要回显的数据,并将其转化为树形结构数组。然后,将该数组赋值给tree组件的data属性,从而让tree组件展示该数据。 最后,需要将已选中的节点信息设置到checkedKeys属性中,以实现回显效果。可以通过遍历数据数组来获取已选中的节点信息,并将其存储到checkedKeys属性中,从而让tree组件自动选中这些节点。 总之,要实现elementui tree组件的回显效果,需要首先创建一个tree组件,然后在mounted生命周期方法中获取需要回显的数据,并将其转化为树形结构数组。最后,将已选中的节点信息设置到checkedKeys属性中,以实现回显效果。这样就可以在应用中使用elementui tree组件来展示完整的导航、分类、目录等信息,同时满足用户对于回显效果的需求。 ### 回答3: elementui是一个非常实用的UI框架,它提供了很多现成的组件,其中tree组件是一个很常用的组件。在使用tree组件时,我们经常需要根据后端返回的数据来回显tree数据。那么具体如何进行回显呢? 首先,我们需要知道tree组件的数据结构。elementui的tree组件数据结构采用树形结构,每个节点都包含一个label字段和一个children字段,children字段是一个数组,可以包含多个层级。例如: ```js { label: '父节点1', children: [ { label: '子节点1' }, { label: '子节点2' } ] } ``` 当我们需要回显树状结构时,我们需要根据后端返回的数据来设置tree组件的数据源(即props中的data)。假设后端返回的数据结构为: ```js [ { id: 1, name: '父节点1', children: [ { id: 2, name: '子节点1' }, { id: 3, name: '子节点2' } ] } ] ``` 我们可以通过递归的方式来构建tree组件的数据源,具体步骤如下: 1. 定义递归函数:我们先定义一个递归函数,用于递归构建树形结构。函数的参数包括数据源(data)和当前节点的父节点(parent)。parent默认值为null,表示当前节点是根节点。函数返回值为一个数组,表示当前节点的所有子节点。 ```js function buildTreeData(data, parent = null) { let treeData = [] data.forEach(item => { let node = { label: item.name, id: item.id, parent: parent } if (item.children && item.children.length > 0) { node.children = buildTreeData(item.children, item.id) } treeData.push(node) }) return treeData } ``` 2. 调用递归函数:在页面中,我们获取后端返回的数据,然后调用递归函数来构建tree组件的数据源。构建完成后,将treeData赋值给tree组件的data属性即可。 ```js <template> <el-tree :data="treeData" /> </template> <script> export default { data() { return { treeData: [] } }, mounted() { // 模拟后端返回的数据 let data = [ { id: 1, name: '父节点1', children: [ { id: 2, name: '子节点1' }, { id: 3, name: '子节点2' } ] } ] // 构建tree组件的数据源 this.treeData = buildTreeData(data) }, methods: { // 定义递归函数 buildTreeData(data, parent = null) { let treeData = [] data.forEach(item => { let node = { label: item.name, id: item.id, parent: parent } if (item.children && item.children.length > 0) { node.children = buildTreeData(item.children, item.id) } treeData.push(node) }) return treeData } } } </script> ``` 通过以上步骤,就可以很方便地完成tree组件的回显。当然,实际使用时还需要根据具体情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值