Vue后端返回数据下拉框及表格树形下拉框回显问题

个人笔记11

在我们工作中当中时常会遇到要展示多个数据,选择其中一项向后端发起AJax请求,我们很自然就想到了下拉框来解决,

由于后端返回的数据一般都是数组对象,后端仅需要所对应的id值

但是我们在确认编辑之后返回来的数据需要回显的时候就会默认展示placeholder属性的值或者绑定的value值.这样的话用户体验就非常不好

解决办法 :

1. 利用中间变量临时替换

 this.temp = this.editProjectDto.groupId
 this.editProjectDto.groupId = this.editProjectDto.groupName
// 最后要保存编辑的时候我们判断是否发生过改变,未改变就替换回之前的值.改变了就为当前值
 this.editProjectDto.groupId =
            this.editProjectDto.projectClassTwoName ===
            this.editProjectDto.groupId
              ? this.temp
              : this.editProjectDto.groupId

2.利用数组map方法新添加一个属性操作,实现思路和上面一样

3.利用DOM操作

// 将下拉框或者树形下拉框绑定ref属性或者原生DOM标签,利用Dom操作

打开谷歌调试工具

// 操作dom用nexttick就好了 因为有可能一个表格有多个下拉框所以可能是一个节点集合
 this.$nextTick(() => {
        const arr = document.querySelectorAll('.ggsmd')
        // 给每一项下拉框得value/placeholder值赋值name值而不是id值 这样对用户的体验就很好了
        arr.forEach((item, i) => {
          item
            .querySelector('.el-input__inner')
            .setAttribute(
              'placeholder',
              this.editProjectDto.projectSpecDtos[this.num]
                .projectCommissionVos[i].groupName || '请选择'
            )
        })
      })
  
  

完成效果如图

写完然后百度发现我的操作是非常笨的方法,无语子!