vue项目element-ui级联选择器el-cascader回显的问题及解决

 更新时间:2023年07月03日 10:58:12   作者:wocwin  
这篇文章主要介绍了vue项目element-ui级联选择器el-cascader回显的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue项目element-ui级联选择器el-cascader回显问题

1、需求

el-cascader内部是数组形式的,而后台接口只需传入数组的最后一个字段,但修改时候往往也只返回这最后一个字段,导致el-cascader无法正确回显

2、原因分析

v-model属性才是回显的关键,只有绑定了v-model属性才会让 <el-cascader \/> 回显,而且数组中的值(即:targetViewId值)一定是最后一级的id加上它父级的id组成

3、解决方案

由于后端返回来的只有最后一级的id,所以我们需要写一个递归来拿到最后一级id和它父级id的数组。废话不多说直接上代码

   /*
    * el-cascader递归获取父级id
    * @param  list 数据列表
    * @param  id 后端返回的id
    * propsCascader 是el-cascader props属性
    **/
    getParentsById(list, id) {
      for (let i in list) {
        if (list[i][this.propsCascader.value || 'value'] == id) {
          return [list[i][this.propsCascader.value || 'value']]
        }
        if (list[i].children) {
          let node = this.getParentsById(list[i].children, id)
          if (node !== undefined) {
            // 追加父节点
            node.unshift(list[i][this.propsCascader.value || 'value'])
            return node
          }
        }
      }
    },

4、效果图

5、注意

如果直接将targetViewId赋值后台返回的最后一个id值,也能回显(最后一级没有选中),其效果如下:

vue+elementui el-cascader回填功能

<el-cascader
              style="width:97%;margin:5px 0;"
              v-model="dataInfo2"
              :options="subjects"
              :props="defaultProps"
              @change="handleChange"
              placeholder="请选择数据表"
              size="small">
</el-cascader>
updateChart(id) {
      this.$http.get('url?id='+id)
        .then(res => {
          if (res.data.success === true) {
            this.dataTableId = res.data.data.dataTableId
            this.dragTo.values = res.data.data.dragTo
            this.$refs.hottable.editShowTableMe(res.data.data)
            this.$http.post('url', {id: this.dataTableId})
              .then(response => {
                this.dataInfo2 = [response.data.data[0].directoryId,this.dataTableId]
                this.dragFrom.measures = []
                this.dragFrom.measures = response.data.data[0].design.schema.measure
                this.deleteChecked()
              })
              .catch(function(error) {
                console.log(error)
              })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    deleteChecked() {
      var arr = []
      for (let i = 0; i < this.dragFrom.measures.length; i++) {
        for (let j = 0; j < this.dragTo.values.length; j++) {
          if (
            this.dragFrom.measures[i].column === this.dragTo.values[j].column
          ) {
            arr.push(i)
          }
        }
      }
      for (var k = 0; k < arr.length; k++) {
        if (k == 0) {
          this.dragFrom.measures.splice(arr[k], 1)   //删除arr[0],删除一个
        } else {
          this.dragFrom.measures.splice(arr[k] - k, 1)   //删除arr[0],删除一个,这样判断的意思是一直从第一个开始删除
        }
      }
},

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+web端仿微信网页版聊天室功能

    vue+web端仿微信网页版聊天室功能

    这篇文章主要介绍了vue+web端仿微信网页版聊天室功能,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • vue3 中v-model语法糖示例详解

    vue3 中v-model语法糖示例详解

    vue3中的v-model相当于vue2中的v-model和v-bind.sync 修饰符组合在一起的产物(择优整合)v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性,使用参数区分,这篇文章主要介绍了vue3 中v-model语法糖,需要的朋友可以参考下
    2024-06-06
  • vue3+ts封装弹窗及封装分页的示例代码

    vue3+ts封装弹窗及封装分页的示例代码

    这篇文章主要介绍了vue3+ts封装弹窗及封装分页的示例代码,本文通过定义defaultDialog .vue,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue使用v-model收集各种表单数据、过滤器的示例详解

    Vue使用v-model收集各种表单数据、过滤器的示例详解

    这篇文章主要介绍了Vue使用v-model收集各种表单数据、过滤器的示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue 取出v-for循环中的index值实例

    vue 取出v-for循环中的index值实例

    今天小编就为大家分享一篇vue 取出v-for循环中的index值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue从一个页面跳转到另一个页面并携带参数的解决方法

    vue从一个页面跳转到另一个页面并携带参数的解决方法

    这篇文章主要介绍了vue从一个页面跳转到另一个页面并携带参数的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue3+vite项目中显示SVG图片的实现

    vue3+vite项目中显示SVG图片的实现

    vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,本文主要介绍了vue3+vite项目中显示SVG图片的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • vue项目首屏加载时间优化实战

    vue项目首屏加载时间优化实战

    单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用的首屏加载优化更是绕不开的话题,这篇文章主要介绍了vue项目首屏加载时间优化实战,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • Vue3中实现微信扫码登录的步骤和代码示例

    Vue3中实现微信扫码登录的步骤和代码示例

    在 Vue 3 中实现微信扫码登录,涉及到前端生成二维码、监听微信回调以及与后端的交互,本文给大家介绍了一个详细的实现步骤和代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • Vue实现验证码登录的方法实例

    Vue实现验证码登录的方法实例

    最近在自己写页面,然后写登录注册UI的时候需要一个验证码组件,去搜一下没找到什么合适的,于是自己写一个,这篇文章主要给大家介绍了关于Vue实现验证码登录的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论