elementUI实现三级级联实现,不可以选中问题
Posted 有时间指导毕业设计SmallMonkey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI实现三级级联实现,不可以选中问题相关的知识,希望对你有一定的参考价值。
文章目录
1.前端的html代码
<el-form-item label="农产品类别">
<!-- <el-select filterable style="width: 220px;" v-model="dataForm.categoryName" default-first-option
filterable allow-create clearable size="small" placeholder="选择商品一级分类"
@change="changeSubCategory" >
<el-option v-for="(item,index) in this.parentCategoryList" :key="index" :label="item.label"
:value="item.value" />
</el-select> -->
<el-cascader
filterable
:show-all-levels="false"
size="small"
clearable
v-model="dataForm.categoryIds"
:options="options"
:props="props"
@change="handleChange"
@getCheckedNodes="getCheckedNodes">
<!-- 自定义显示的列 -->
<template slot-scope=" node,data ">
<span>data.categoryId、 data.categoryName</span>
</template>
</el-cascader>
</el-form-item>
2.vue的data里面需要定义的代码
options: [
value: 'zhinan',
label: '指南',
children: [
value: 'shejiyuanze',
label: '设计原则',
children:[
value:"",
lable:""
]
]
],
parentCategoryList: [],
subOptions1: [],
subOptions: [],
flag: false,
props:
expandTrigger: 'hover',
//multiple:true, //这里设置为多选模式
value: "categoryId",
label: "categoryName", //展示的lable名字
children:"categories" //展示子级
,
3.methods里面代码
methods:
handleChange(value)
console.log("",value);
console.log("选中的值:",this.dataForm.categoryIds)
,
getCheckedNodes(leafOnly)
console.log("选中节点数组",leafOnly)
,
showCategorires()
console.log("3333333333333333333")
var userId =getCookieValue("userId");
var url2 = baseUrl + "index/categorylist";
axios(
method:"post",
data:userId,
url:url2,
).then(res =>
console.log("商品分类数据111111111111:",res.data.data);
this.categorydataList = res.data.data;
this.options = this.getTreeData(res.data.data);
this.options.children = res.data.data.categories;
this.options.value = res.data.data.categoryId;
this.options.label = res.data.data.categoryName;
console.log(this.options, "----------CategoriesdataList")
)
,
//递归判断列表,把最后的children设为undefined
getTreeData(data)
for(var i=0;i<data.length;i++)
if(data[i].categories.length < 1)
// children若为空数组,则将children设为undefined
data[i].categories = undefined;
else
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(data[i].categories);
return data;
,
4.递归方法getTreeData用于解决选不中问题,把所有没有的数据设置为undefined.
以上是关于elementUI实现三级级联实现,不可以选中问题的主要内容,如果未能解决你的问题,请参考以下文章
elementui cacader 级联选择器 鼠标悬浮显示节点内容