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创建项目后没有webpack.config.js(vue.config.js)文件的解决

    Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决

    这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue $router和$route的区别详解

    vue $router和$route的区别详解

    这篇文章主要介绍了vue $router和$route的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue3+element Plus实现在table中增加一条表单数据的示例代码

    vue3+element Plus实现在table中增加一条表单数据的示例代码

    这篇文章主要介绍了vue3+element Plus实现在table中增加一条表单数据的操作,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue.js入门教程之计算属性

    vue.js入门教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑,你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性,为什么要用这东西呢?通过下面这篇文章你将解决这些问题,下面来一起看看吧。
    2016-09-09
  • vue表单数据交互提交演示教程

    vue表单数据交互提交演示教程

    今天小编就为大家分享一篇vue表单数据交互提交演示教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue+ElementUI 封装简易PaginationSelect组件的详细步骤

    Vue+ElementUI 封装简易PaginationSelect组件的详细步骤

    这篇文章主要介绍了Vue+ElementUI 封装简易PaginationSelect组件,这里简单介绍封装的一个Pagination-Select组件几个步骤,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 简单谈谈vue的过渡动画(推荐)

    简单谈谈vue的过渡动画(推荐)

    下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue大屏展示适配的方法

    vue大屏展示适配的方法

    这篇文章主要为大家详细介绍了vue大屏展示适配,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue3中轻松实现switch功能组件的全过程

    vue3中轻松实现switch功能组件的全过程

    这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 解析vue 3.0 使用axios库发起 post get 的配置过程

    解析vue 3.0 使用axios库发起 post get 的配置过程

    get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢 这里记录一下配置过程,对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧
    2022-05-05

最新评论