(component): cascader级联选择器 新增onlyLastLevel属性 控制displayValue回显数据层级

This commit is contained in:
0o张不歪o0
2022-06-26 15:09:36 +08:00
parent f215f47210
commit 0a4dc242f6
2 changed files with 34 additions and 43 deletions

View File

@@ -300,10 +300,19 @@ const options = [
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
<span style="margin-left:20px">输出的值:{{value1}}</span>
</template>
:::
::: title 控制回显层级
:::
::: demo 使用 `onlyLastLevel` 属性 可以仅在回显的displayValue显示选中项最后一级的标签而不是完整路径, 注意绑定的v-model仍然是完整的。
<template>
<lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
<span style="margin-left:20px">输出的值:{{valueLv}}</span>
</template>
<script setup>
import { ref } from "vue";
const value1=ref(null)
const valueLv=ref(null)
</script>
:::
@@ -626,7 +635,7 @@ const options2 = [
| v-model / modelValue | 值 |
| decollator | 分割符号,默认为 / |
| options | 选项参数 格式请见上面的demo |
| onlyLastLevel | 回显displayValue仅显示最后一级默认为 `false` |
:::
::: title Cascader 事件
@@ -634,7 +643,7 @@ const options2 = [
::: table
| 属性 | 描述 |
| 方法名 | 描述 |
| ---- | ------------ |
| change | 选中后数据改变的回调 |