elementUI实现三级级联实现，不可以选中问题

Posted 2022-12-30 有时间指导毕业设计SmallMonkey

文章目录

• • • 1.前端的html代码
    • 2.vue的data里面需要定义的代码
    • 3.methods里面代码
    • 4.递归方法getTreeData用于解决选不中问题，把所有没有的数据设置为undefined.

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.

参考文章