首先表单这样写
<el-form-item label="事件类型:" prop="type">
<el-cascader
v-model="eventForm.type"
:options="options"
@change="handleChange"
ref='selecttree'
:props="{value:'id' }"
:show-all-levels="false"
clearable
>
</el-cascader>
</el-form-item>
data中:
options:[],
eventForm:{
type:'',
}
methods中:用来显示每次点击的选项
handleChange(value) {
let me=this;
const checkedNodes=me.$refs['selecttree'].getCheckedNodes();
me.eventForm.type=checkedNodes[0].value;
},
从后台接口拿到数据:
getJlTypelist(){
let me = this;
let formdata = new FormData();
formdata.append('参数', '字段');
me.$axios.post('接口路径',参数).then(function (data) {
me.options = me.getTypelist(data);
});
},
对返回数据进行处理:
/*递归判断列表*/
getTypelist(data) {
let me = this;
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].children.length; j++) {
//这个循环是第三级存在的时候
for(let k = 0; k < data[i].children[j].children.length; k++){
if (data[i].children[j].children[k].children.length < 1) {
data[i].children[j].children[k].children = undefined;
}
}
//如果第三级不存在,如果没有下面这个就会出现多一级空白的情况
if (data[i].children[j].children.length < 1) {
data[i].children[j].children = undefined;
}
}
}
return data;
},
这是第二、三级都存在的情况下,没有加上面的if
这是第二、三级都存在的情况下,没有加上面的第三个for循环
每个人遇到的情况可能不一样,部分可以参考