# 自定义级联选择器

**Repository Path**: csdn-zeng8750_admin/CustomCascader

## Basic Information

- **Project Name**: 自定义级联选择器
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-08
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue2 自定义级联选择器组件

基于 Vue2 + Vue-CLI4 开发的级联选择器组件，功能类似于 Element UI 的 Cascader 组件。

## 功能特性

- **多选模式**：支持选择多个选项
- **值双向绑定**：使用 `v-model` 实现双向数据绑定
- **默认值不可修改**：通过 `default-values` 属性设置不可删除的默认值
- **查询搜索**：支持输入关键字快速搜索匹配项
- **按选择顺序展示**：选中的值按选择顺序展示
- **只读展示模式**：用于展示默认值，不可编辑
- **自定义分隔符**：可自定义标签之间的分隔符
- **禁用状态**：支持整体禁用

## 使用方法

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run serve
```

### 3. 组件引用

```vue
<template>
  <custom-cascader
    v-model="selectedValues"
    :data="options"
    :multiple="true"
    :filterable="true"
    :default-values="['default-value']"
    placeholder="请选择"
    separator="/"
    @change="handleChange"
  />
</template>

<script>
import CustomCascader from '@/components/CustomCascader.vue'

export default {
  components: { CustomCascader },
  data() {
    return {
      selectedValues: [],
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            { value: 'chaoyang', label: '朝阳区' },
            { value: 'haidian', label: '海淀区' }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value, nodes) {
      console.log('选中的值:', value)
      console.log('选中的节点:', nodes)
    }
  }
}
</script>
```

## Props 说明

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| v-model | Array | [] | 绑定值 |
| data | Array | [] | 数据源 |
| multiple | Boolean | false | 是否多选 |
| readonly | Boolean | false | 只读模式（展示默认值） |
| default-values | Array | [] | 默认值（不可修改） |
| disabled | Boolean | false | 是否禁用 |
| filterable | Boolean | false | 是否可搜索 |
| placeholder | String | '请选择' | 占位符 |
| separator | String | '/' | 分隔符 |
| expandTrigger | String | 'click' | 展开触发方式 |

## Events 说明

| 事件名 | 参数 | 说明 |
|--------|------|------|
| change | (value, nodes) | 值变化时触发 |
| input | (value) | 绑定值变化时触发 |

## 数据结构

```javascript
{
  value: 'unique-id',      // 唯一标识
  label: '显示文本',        // 显示文本
  children: [],            // 子节点
  disabled: false          // 是否禁用该选项
}
```