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