Vue.js+element+es6（递归级联选择器） vue.js-功能

我们已经回使用到级联选择器
一、首先我们在HTML中加入我们级联选择器的样式，例如图片上的样式

文章图片

【Vue.js+element+es6（递归级联选择器）】 二、我们在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 = https://www.it610.com/article/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); } }); },

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