<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 详解关于element级联选择器数据回显问题

         更新时间:2019年02月20日 11:14:36   作者:来一杯牛奶   我要评论

        这篇文章主要介绍了详解关于element级联选择器数据回显问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

        element级联选择器数据回显问题

        对于前端小菜鸡来说,被这个问题也是困扰了好久。也?#21069;?#24230;的方法。

        表单部分代码:

        <el-form-item label="部门名称:" prop="deptId">
        <el-cascader
            placeholder="请选择部门"
            :props="depShowType"
            :options="deptData"
            filterable
            change-on-select
            v-model="SelectdeptId">
        </el-cascader>
        </el-form-item>

        data中定义:

        depShowType:{
        value:'id',
        label:'name',
        children:'nodes'
        },
        SelectdeptId:[],
        

        methods中:

        // 编辑
        handleEdit(data){
        this.textShow=true;
        this.textForm=data;
        this.SelectdeptId=this.changeDetSelect(data.deptId,this.deptData)  //数据双向绑定
        },
        
        changeDetSelect(key,treeData){
        let arr = []; // 在递归时操作的数组
        let returnArr = []; // 存放结果的数组
        let depth = 0; // 定义全局层级
        // 定义递归函数
        function childrenEach(childrenData, depthN) {
          for (var j = 0; j < childrenData.length; j++) {
            depth = depthN; // 将执行的层级赋值 到 全局层级
            arr[depthN] = (childrenData[j].id);
            if (childrenData[j].id == key) {
              returnArr = arr.slice(0, depthN+1); //将目前匹配的数组,截断并保存到结果数组,
              break
            } else {
              if (childrenData[j].nodes) {
                depth ++;
                childrenEach(childrenData[j].nodes, depth);
              }
            }
          }
          return returnArr;
        }
        return childrenEach(treeData, depth);
        },

        以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

        相关文章

        • 基于 Vue 实现一个酷炫的 menu插件

          基于 Vue 实现一个酷炫的 menu插件

          本文给大家介绍基于 Vue 实现一个酷炫的 menu插件,此篇教程需要大家具备一定的css和vue基础知识,本文分步骤给大家介绍的非常详细,需要的朋友参考下吧
          2017-11-11
        • vue项目中实现?#35745;?#39044;览的公用组件功能

          vue项目中实现?#35745;?#39044;览的公用组件功能

          小编接到查看影像的功能需求,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去。下面小编通过实例代码给大家分享vue项目中实现?#35745;?#39044;览的公用组件功能,需要的朋友参考下吧
          2018-10-10
        • vue父组件向子组件(props)传递数据的方法

          vue父组件向子组件(props)传递数据的方法

          这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
          2018-01-01
        • vue2的todolist入门小项目的详细解析

          vue2的todolist入门小项目的详细解析

          本篇文章主要介绍了vue2的todolist入门小项目的详细解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2017-05-05
        • vue router自动判断左右翻页转场动画效果

          vue router自动判断左右翻页转场动画效果

          最近公司项目比较少终于有空来记?#23478;?#19979;自己对vue-router的一些小小的使用心得,本文给大家分享vue router自动判断左右翻页转场动画效果,?#34892;?#36259;的朋友一起看看吧
          2017-10-10
        • vue之数据交互实例代码

          vue之数据交互实例代码

          本篇文章主要介绍了vue之数据交互实例代码,vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,?#34892;?#36259;的可以了解一下
          2017-06-06
        • vue数据传递--我有特殊的实现技巧

          vue数据传递--我有特殊的实现技巧

          这篇文章主要介绍了vue数据传递一些特殊梳理技巧,需要的朋友可以参考下
          2018-03-03
        • 在vue.js中使用JSZip实现在前端解压文件的方法

          在vue.js中使用JSZip实现在前端解压文件的方法

          今天小编就为大家分享一篇在vue.js中使用JSZip实现在前端解压文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
          2018-09-09
        • Vue.js组件间通信方式总结?#23601;?#33616;】

          Vue.js组件间通信方式总结?#23601;?#33616;】

          组件之间通信分为三种:父-子;子-父;跨级组件通信。下面,就组件间如何通信做一些总结。需要的朋友可以参考下
          2018-11-11
        • Vue父子组件之间的通信实例详解

          Vue父子组件之间的通信实例详解

          在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下
          2018-09-09

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>