级联选择器

最新推荐文章于 2025-03-17 16:51:49 发布

h～r

最新推荐文章于 2025-03-17 16:51:49 发布

阅读量669

点赞数 1

文章标签： javascript es6

本文链接：https://blog.youkuaiyun.com/huang123rui45/article/details/117327275

版权

这篇博客主要介绍如何利用级联选择器（cascader）进行数据筛选。通过遍历'saleType'和'org'数组，根据父级值过滤二级菜单，构建级联选项。在getSaleWork()函数中，对数据进行处理并更新到级联选择器的配置中，实现了动态数据绑定。此操作对于前端界面的数据交互和用户体验优化至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

级联选择器传给是一个数组过去

  {
          // type: 'cascader',
          type: 'select',
          key: 'saleNetworkCode',
          props: {
            label: '服务主体',
            placeholder: '请选择',
            data: {
              options: []
            }
          }
        },

getSaleWork() { // # 级联选择器 二级菜单
      const saleType = getValueSet()['agds.dh.saleType']
      const org = getValueSet()['agds.dh.org']
      saleType.forEach(item => {
        item.children = org.filter(i => {
          return i.parent.includes(item.value)
        })
      })
      console.log(saleType, 481)
      console.log(org)
      this.$refs.filter.setItemConfig('saleNetworkCode', { props: { data: {
        type: 'data',
        options: saleType || []
      }}})
    },