当前位置：首页 > article >正文

级联选择器多选动态加载

article 2025/2/22 15:20:42

一.级联展示

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

样式问题：如果用级联选择器可以使用自带的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>

查看全文

http://www.kler.cn/a/552719.html