Cascader级联选择器的使用

最近在项目中需要做一个级联选择器,网上找到有现成的Vue中的组件-cascader
下面就简单记录一下使用中遇到的问题;
首先声明,我是在html和js中嵌套的vue,而不是纯用vue开发的前端,两个还有
一些形式上的区别。

目标效果如下:

Cascader级联选择器的使用_第1张图片

后台递归获取数据接口如下:

	@SysLog("所属领域")
	@RequestMapping("/serviceField")
	public R getServiceField() {
		return sysServiceService.getServiceField();
	}

获取到的JSON数据格式如下:
Cascader级联选择器的使用_第2张图片

HTML中

<td class="formTitle">所属领域</td>
				<td class="formValue">
				<el-cascader  style="width:277px;"
						ref="myCascader"
						@change="serviceFieldChange"
						:options="serviceFields.options"
						:props="serviceFields.defaultParams"
						v-model="serviceFields.selectedOptions"
				></el-cascader>
				</td>

其中

  • ref代表的是类似选择器的id,js中可以进行调用
  • @change代表的是对应的函数
  • options代表的是数据源,即上述后台传输过来的JSON数据
  • props 这个必须配置,代表的是label、value、children与数据源的映射关系
  • v-model代表的是选中的数据,是以label为基准

JS中

  serviceFields:{
                options:[],
                selectedOptions: [],
                defaultParams: {
                    label: 'fieldName',
                    value: 'fieldId',
                    children: 'fieldList'
                }
            }

上述对应的就是在html中的各种配置 ,然后数据源的获取如下:

	getServiceField :function(){                   //http get请求data.json 的数据
			$.getJSON('../../sys/service/serviceField?_' + $.now(), function(data) {
			    console.log(data.allServiceField);
				vm.serviceFields.options = data.allServiceField;
				console.log("success");

            });
		}

其中data.allServiceField表示返回的hashmap数据中key为allServiceField的value。
如果这么写的话,就会出现一个问题:

  • 级联选择器的空级联BUG
    效果如下:
    Cascader级联选择器的使用_第3张图片
    此时就算选择了前边的“交通-收费站-收费站“过车数据也会失效。
  • 产生的原因
    产生此种方法的原因是因为我后台递归子菜单的时候,到最后一层是空值,所以返回的是空,即【】(应该是[],这里为了醒目),就会导致这个效果
  • 解决方案
    1.有小伙伴说,可以在后台对数据进行一次过滤,把【】情况的set为null,我试过,还是不行,可能是方法不对。我使用的下边方法
    2.在JS中再次递归一次,递归到最后一层的时候,赋值为undefined,这样前端就不会显示空级联BUG。
    实例代码如下;
function getTreeData(serviceField){
    // 循环遍历json数据
    for(var i=0;i<serviceField.length;i++){
        if(serviceField[i].fieldList.length<1){
            // children若为空数组,则将children设为undefined
            serviceField[i].fieldList=undefined;
        }else {
            // children若不为空数组,则继续 递归调用 本方法
            this.getTreeData(serviceField[i].fieldList);
        }
    }
    return serviceField;
}

好,万事具备,运行后发现页面是空的,于是开始DEBUG,发现后台传输的数据以及js中递归处理后的数据都没有问题,那么问题就是有可能出现在html中的组件引用上。
于是,经过几个小时的努力,发现以下标签

	<script src="//unpkg.com/vue/dist/vue.js"></script>
	<script src="//unpkg.com/[email protected]/lib/index.js"></script>

没有生效,原因是放置的位置错误了, 由于是在别人的基础之上进行了二次开发,没有注意到这个问题

#parse("include/header.html") 
<Body>
#parse("include/footer.html")

后来发现 head.html中存放的都是css,而script标签全部存放在了footer.html中,而我把新增的放在了body中,导致没有生效。正确的做法是放在footer.html中或者是后边都可以

你可能感兴趣的:(前端)