级联选择器多选动态加载

一.级联展示

注：因为级联选择器这里是动态加载，因此如果上来选中一级就需要加载出后面三级的全部数据，依然会很卡，因此，和产品协商把一二级多选框去掉了，这样也避免了你选择一级不能实现子级被全部选中的问题，但三四级不存在这样的问题，点击三级回家再出最后一级，再点击多选框改子级便会被全部选中。

 样式问题：如果用级联选择器可以使用自带的popperClass属性自定义一个样式隐藏一二级多选框，例如popperClass="popper-select1"

<style lang="less">
.popper-select1 {.el-cascader-menu:nth-child(1),.el-cascader-menu:nth-child(2) {.el-checkbox {display: none;}}
}
</style>

  注意：element这里有个坑，就是popper-select1不生效的问题。

 解决方案：需要去掉scoped

 如果用级联面板由于没有该属性，因此需要自己这样写

<el-cascader-panelv-model="collectValue":props="address":options="collectOptions"/>::v-deep(.el-cascader-menu:nth-child(1) .el-checkbox), ::v-deep(.el-cascader-menu:nth-child(2) .el-checkbox) {display: none;
}

二.动态加载

这里动态加载只需要使用我的address对象就行，代码在最下面，我这里是四级联动，可以跟你需要联动的级别修改leaf: node?.level >= 3，这里不赘述。

三.接口调用

1. 这是调用一级时后端返回的数据

   [{"code": "00ad278cbe67fc3c3f7ed64283c5786e","note": "A1VC38T7YXB528","name": "JP","parentCode": null,"disabled": false,"children": null},{"code": "327210f6fb42adb5d19dd823fe33db15","note": "A1PA6795UKMFR9","name": "DE","parentCode": null,"disabled": false,"children": null}
   ]

2. 点击一级返回相应的二级菜单，以此类推
   下面是我传给后端的参数

   {"code": "327210f6fb42adb5d19dd823fe33db15","name": "DE","note": "A1PA6795UKMFR9","parentCode": ""
   }

   后端返回对应一级的二级菜单

   [{"code": "1fb5aaa29a8b8422254b2513ea426531","note": "DVD & Blu-ray","name": "Dvd & Bluray","parentCode": "327210f6fb42adb5d19dd823fe33db15","disabled": false,"children": null},{"code": "23872f23662c3b946c0e00f3c8c16534","note": "Gift Cards","name": "Gift Cards","parentCode": "327210f6fb42adb5d19dd823fe33db15","disabled": false,"children": null}]

四.最终代码如下

<el-cascaderv-model="data.category":options="collectionTypeOptions"collapse-tagscollapse-tags-tooltipclearable:props="address":popper-append-to-body="false"popperClass="popper-select1"/>let address = {value: 'name',label: 'name',children: 'children',multiple: true,leaf: 'leaf',lazy: true, // 开启懒加载// checkStrictly: true, //可选择任意节点/*** 异步懒加载节点数据的函数* @param {Object} node - 当前被点击的节点对象* @param {Function} resolve - 数据加载完成后的回调函数，必须调用* 该函数根据当前节点的信息构造查询条件，调用接口获取下一级节点数据。* 当节点层级达到 4 级时，不再请求接口。获取到的数据经过处理后通过 resolve 返回。*/async lazyLoad(node, resolve) {// node为当前点击的节点，resolve为数据加载完成的回调(必须调用)const { level } = nodeconst nodes = []// 构造查询条件 => 接口入参const params = {code: node.data.code || '',// level: node.data.level,// level: node.level + 1,name: node.data.name || '',note: node.data.note || '',parentCode: node.data.parentCode || ''}const res = await ApiBusiType.marketDataCollection.queryGraduallyCollectionConfig(params)if (node.level === 0) {collectionTypeOptions.value = res.result || []resolve(res.result)} else {res.result.map((item) => {let obj = {code: item?.code,name: item?.name,note: item?.note,disabled: item.disabled,parentCode: item?.parentCode,leaf: node?.level >= 3 // 当 node.level 层级达到4级时, 就不再请求接口 // 具体要多少级才不请求接口, 根据层级修改// children: item.children || []}nodes.push(obj)})resolve(nodes)}}
}
<style lang="less">
.popper-select1 {.el-cascader-menu:nth-child(1),.el-cascader-menu:nth-child(2) {.el-checkbox {display: none;}}
}
</style>