级联选择器多选动态加载

一.级联展示

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

 样式问题：如果用级联选择器可以使用自带的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-panel v-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，这里不赘述。

三.接口调用 这是调用一级时后端返回的数据 [ { "code": "00ad278cbe67fc3c3f7ed64283c5786e", "note": "A1VC38T7YXB528", "name": "JP", "parentCode": null, "disabled": false, "children": null }, { "code": "327210f6fb42adb5d19dd823fe33db15", "note": "A1PA6795UKMFR9", "name": "DE", "parentCode": null, "disabled": false, "children": null } ]

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

{ "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-cascader v-model="data.category" :options="collectionTypeOptions" collapse-tags collapse-tags-tooltip clearable :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 } = node const 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>