更新记录

1.1.0（2025-12-03） 下载此版本

==新增== 一、支持自定义字段映射功能

1. 新增 label-key 属性，支持自定义显示文本字段名 2.新增 value-key 属性，支持自定义选项值字段名 3.新增 children-key 属性，支持自定义子级字段名 二、支持禁用选择器功能 1.新增 disabled 属性，可控制选择器的启用/禁用状态

1.0.4（2025-06-23） 下载此版本

更新日志

修改自动下载组件

1.0.3（2025-06-23） 下载此版本

更新日志

自动下载到uni_modules文件夹下面

平台兼容性

其他

级联下拉选择器

一个功能强大的 uni-app 级联下拉选择组件，完美支持多选模式、自动展开子级选项，完美适配所有 uni-app 平台（App端、H5端、所有小程序端、快应用），提供美观的 UI 设计和交互体验，Vue2/Vue3 完全兼容。支持自定义 label 和 value 字段映射，以及禁用选择器功能。

✨ 特性

• 🎯 多级级联选择：支持无限层级级联数据结构
• ✅ 多选模式：灵活的单选/多选切换，满足不同业务场景
• 🔄 自动展开子级：智能自动展开子级选项，提升用户体验
• 📱 全平台适配：完美支持 App端、H5端、所有小程序端、快应用
• 🎨 美观UI设计：现代化的界面设计，优雅的交互体验
• ⚡ Vue2/Vue3兼容：完全兼容 Vue2 和 Vue3，无缝迁移
• 🔧 自定义字段映射：支持自定义 label、value、children 字段名
• 🚫 禁用选择器：支持整体禁用，满足只读场景需求

📦 安装

1. 在 uni-app 项目中，通过插件市场导入
2. 或直接将组件文件复制到项目中

🎯 组件注册方式

方式 1：自动注册（推荐） 安装插件后，组件会自动注册，可直接使用：

<template>
  <view>
    <Xyy-cascade-dropdown :options="cascadeOptions" v-model="selectedValue" />
  </view>
</template>

方式 2：手动注册

<script>
import XyyCascadeDropdown from "@/uni_modules/Xyy-cascade-dropdown/components/Xyy-cascade-dropdown/Xyy-cascade-dropdown.vue";

export default {
  components: {
    XyyCascadeDropdown,
  },
};
</script>

🚀 快速开始

基本用法

<template>
  <view>
    <!-- 基本用法 -->
    <Xyy-cascade-dropdown
      :options="cascadeOptions"
      v-model="selectedValue"
      @change="ionChange"
    />
  </view>
</template>

自定义字段映射

当您的数据使用不同的字段名时，可以使用 label-key、value-key 和 children-key 来自定义映射：

<template>
  <view>
    <!-- 自定义字段映射 -->
    <Xyy-cascade-dropdown
      v-model="customSelectedValue"
      :options="customCascadeOptions"
      label-key="title"
      value-key="code"
      children-key="nodes"
      @change="changeHandler"
      @itemsChange="itemsChangeHandler"
    />
  </view>
</template>

禁用选择器

可以通过设置 disabled 属性为 true 来禁用选择器：

<template>
  <view>
    <!-- 禁用选择器 -->
    <Xyy-cascade-dropdown
      v-model="selectedValue"
      :options="cascadeOptions"
      :disabled="true"
    />
  </view>
</template>

## 📋 API

### Props

| 参数         | 类型         | 默认值   | 说明                                       |
| ------------ | ------------ | -------- | ------------------------------------------ |
| options      | Array        | []       | 级联选项数据                               |
| value        | Array/String | []       | 绑定值                                     |
| label-key    | String       | "label"  | 自定义显示文本字段名                       |
| value-key    | String       | "value"  | 自定义选项值字段名                         |
| children-key | String       | "children" | 自定义子级字段名                           |
| disabled     | Boolean      | false    | 是否禁用选择器                             |

### Events

| 事件名      | 说明           | 参数    |
| ----------- | -------------- | ------- |
| change      | 选择变化时触发 | (value) |
| input       | v-model 绑定   | (value) |
| itemsChange | 选中项变化     | (items) |

## 🔧 数据格式

### 标准格式

```javascript
const options = [
  {
    label: "显示文本",
    value: "选项值",
    children: [
      // 子级选项...
    ],
  },
];

自定义字段格式

当使用自定义字段映射时，数据格式可以灵活定义：

// 使用自定义字段名
customOptions = [
  {
    title: "一级选项1",      // 对应 label-key="title"
    code: "1",               // 对应 value-key="code"
    nodes: [                 // 对应 children-key="nodes"
      {
        title: "二级选项1-1",
        code: "1-1",
        nodes: [
          {
            title: "三级选项1-1-1",
            code: "1-1-1"
          }
        ]
      }
    ]
  }
];

📱 兼容性

• ✅ App 端
• ✅ H5 端
• ✅ 小程序端
• ✅ Vue2/Vue3

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

📄 许可证

MIT License