Vue.js+element+es6(递归级联选择器)

我们已经回使用到级联选择器

一、首先我们在HTML中加入我们级联选择器的样式,例如图片上的样式

                            <el-form-item label="父级选择" class="form_item">
                                <el-cascader  placeholder="请选择父级" clearable :options="options" v-model="selectedOptions" :change-on-select="true"  :props="props" :show-all-levels="true" @change="handleChange" style="width:340px">
                                </el-cascader>
                            </el-form-item>

 

 二、我们在data中定义数据

selectedOptions这个是级联选择器中所需要的默认值是数组型

selectedOptions:[]      数组中存入数据[父级,子级],不只有两个,如果有多个的过,

用通俗的语言来书就是   默认值:[爷爷,爸爸,孙子]

这个属性一般在获取详情的时候将这个值填入,这样就能得到我们的数据了

            selectedOptions: [],
            options: [],
            enumArr:[],
            props: {
              checkStrictly: true,
              value: "value",
              label: "label",
              children: "children"
            }

options:[]  这个是数据中的所有元素

         getList(){
            this._getJcpzList().then(result =>{
                let da=JSON.parse(result)
                if(da.status==200){
                    this.enumArr=[];
                    this.getEnumsList(da.data)
                    console.log(200000,da.data)
                    da.data.forEach(item =>{
                        this.keep(item);
                        this.options.push({
                            value: item.ID,
                            label: item.FLMC,
                            children: item.CHILDREN
                        });
                        // console.log(888,this.options)
                    })
                }
                else{
                    this.$message.error("获取成果分类列表失败")
                }
            })
        },

这个是当我们在后台调取数据是用这个存数据,这个数据结构类型:

options:[

   {

      value: 'zhinan',

      label: '指南',

      children: [

            {

                 value: 'shejiyuanze',

                 label: '设计原则',

                 children: []

            },

     }

]

将我们用到的所有的数据都以这种格式push到options中,

enumArr:[]   这个值是我们要获取所有的枚举值,这个枚举值是将所有的父子和子级都在一个数组中,获取这个枚举值的时候,我们要用到递归方法,

        //获取枚举值列表(递归)获取所有的数据(子父级所有的数据)
		getEnumsList(val){
			if(val&&val.length!=0){
				val.forEach(item =>{
					this.enumArr.push(item);
					this.getEnumsList(item.children);
				})
			}
		},

这个我们要做判断,首先我们判断一下是否有值,如果有值循环就添加进数组中,然后递归他的子级,这样他的所有的枚举值就会添加到数组中,

下面我们来递归子级,现在我们的将子级push到options中,

        //循环子级
        keep(val){
            // console.log("keep(val)",val)
            val.CHILDREN = [];
            if (val.children&&val.children.length!= 0) {
                val.children.forEach(item => {
                    val.CHILDREN.push({
                        value: item.ID,
                        label: item.FLMC,
                        children: item.CHILDREN
                    });
                    this.keep(item);
                });
            } else {
                delete val.CHILDREN;
            }
        },

这样我们要的数据就已经准备好了,

这里我们的element组件中默认有@change时间

       handleChange(value){
            let fid = value[value.length - 1];
            this.form.FID = fid;
            console.log(value[0],8888)
            console.log("枚举值",this.enumArr) 
            let index = this.enumArr.find(item => {
                return item.ID == value[0]
            })
            if(index){
                this.glsjbmc=index.GLSJB
                console.log(12112,index.GLSJB)
            }
        },

这个值我们打印的时候[第一级,第二级,...]

 

 

在获取详情的时候我们会循环

getDetail(id) {
      let param = {
        pageNum: "",
        pageSize: "",
        id: dataid,
        keyword: ""
      };
      this.$store.dispatch("getDepartmentListTree", param).then(res => {
        let data = JSON.parse(res);
        if (data.status == "0") {
          this.form.name = data.data.list[0].departmentname;
          this.form.description = data.data.list[0].description;
          //将默认值放入到数组中
          this.selectedOptions.push(data.data.list[0].xzqbm);
          this.enumArr.forEach(item => {
            if (data.data.list[0].xzqbm && item.id == data.data.list[0].xzqbm) {
              this.selectedOptions.push(item.pid);
              this.recursion(item.pid);
            }
          });
          console.log( this.selectedOptions,"%%%%")
        }
      });
    },

//遍历pid
recursion(val) {
      this.enumArr.forEach(item => {
        if (item.id == val && item.pid != "0") {
          this.selectedOptions.push(item.pid);
          this.recursion(item.pid);
        }
      });
    },

这样在获取详情的时候就可以获取到默认的值了

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

侧耳倾听...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值