113 lines
3.0 KiB
Markdown
113 lines
3.0 KiB
Markdown
# l-cascader 多选功能测试指南
|
||
|
||
## 测试页面
|
||
|
||
已创建测试页面：`/pages/test-cascader/test-cascader.uvue`
|
||
|
||
## 测试内容
|
||
|
||
### 1. 单选模式测试
|
||
- 点击"打开单选级联选择器"按钮
|
||
- 选择任意选项，验证单选功能
|
||
- 检查选中值是否正确显示
|
||
|
||
### 2. 多选模式测试
|
||
- 点击"打开多选级联选择器"按钮
|
||
- 验证 checkbox 是否正常显示
|
||
- 选择多个选项，验证多选功能
|
||
- 检查选中值和数量是否正确显示
|
||
|
||
### 3. 限制选择数量测试
|
||
- 点击"打开限制3个的多选级联选择器"按钮
|
||
- 尝试选择超过3个选项
|
||
- 验证是否显示限制提示
|
||
- 检查选中数量是否正确限制
|
||
|
||
## 修复的问题
|
||
|
||
### 1. new-conversation-set.uvue 中的问题
|
||
- **问题**：添加 `:multiple="true"` 后组件无法点击，checkbox 不显示
|
||
- **原因**：
|
||
- 使用了错误的 v-model 绑定（应该用 `v-model:multipleValue`）
|
||
- 数据类型不匹配（单选用 string，多选用 string[]）
|
||
- **修复**：
|
||
- 修改为 `v-model:multipleValue="cascaderMultipleValue"`
|
||
- 添加 `cascaderMultipleValue` 响应式数据
|
||
- 修改 `:multiple="isMultiple"` 动态控制模式
|
||
|
||
### 2. l-cascader 组件中的问题
|
||
- **问题**：checkbox 组件属性使用错误
|
||
- **原因**：使用了不存在的 `checked` 属性
|
||
- **修复**：改为使用 `modelValue` 和 `@update:modelValue`
|
||
|
||
## 使用方法
|
||
|
||
### 单选模式
|
||
```vue
|
||
<l-cascader
|
||
:visible="show"
|
||
:options="options"
|
||
v-model="singleValue"
|
||
title="单选级联选择"
|
||
@change="onChange"
|
||
/>
|
||
```
|
||
|
||
### 多选模式
|
||
```vue
|
||
<l-cascader
|
||
:visible="show"
|
||
:options="options"
|
||
:multiple="true"
|
||
v-model:multipleValue="multipleValue"
|
||
title="多选级联选择"
|
||
@change="onChange"
|
||
/>
|
||
```
|
||
|
||
### 限制选择数量
|
||
```vue
|
||
<l-cascader
|
||
:visible="show"
|
||
:options="options"
|
||
:multiple="true"
|
||
:maxTagCount="3"
|
||
v-model:multipleValue="limitedValue"
|
||
title="限制选择数量"
|
||
@change="onChange"
|
||
/>
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **数据绑定**：
|
||
- 单选模式使用 `v-model` 绑定 string 类型
|
||
- 多选模式使用 `v-model:multipleValue` 绑定 string[] 类型
|
||
|
||
2. **事件处理**：
|
||
- `change` 事件在单选模式下返回 string
|
||
- `change` 事件在多选模式下返回 string[]
|
||
|
||
3. **样式**：
|
||
- 多选模式下使用 lime-checkbox 组件
|
||
- 单选模式下保持原有的图标显示
|
||
|
||
4. **功能特性**：
|
||
- 支持父子节点关联选择（checkStrictly 属性）
|
||
- 支持限制最大选择数量（maxTagCount 属性）
|
||
- 支持禁用某些选项（disabled 属性）
|
||
|
||
## 测试数据
|
||
|
||
测试页面使用了三级级联数据：
|
||
- 省份（浙江省、江苏省、广东省）
|
||
- 城市（杭州、宁波、温州等）
|
||
- 区县（西湖区、余杭区等）
|
||
|
||
## 预期结果
|
||
|
||
1. **单选模式**：只能选择一个最终选项，显示选中路径
|
||
2. **多选模式**：可以选择多个选项，显示所有选中值
|
||
3. **限制模式**：最多选择指定数量的选项，超出时显示提示
|
||
4. **交互体验**：点击流畅，checkbox 状态正确，数据绑定准确
|