Vue.js+element+es6（递归级联选择器）

最新推荐文章于 2024-08-01 15:15:14 发布

侧耳倾听...

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量5.8k

点赞数

分类专栏： vue.js-功能文章标签：级联选择器 vue.js es6 element 递归

本文链接：https://blog.csdn.net/xm_w_xm/article/details/81413192

版权

vue.js-功能专栏收录该内容

41 篇文章 3 订阅

订阅专栏

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

一、首先我们在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);
        }
      });
    },

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