From 0a4dc242f6a1eda42d0ad8bcb96952cee79caad9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Sun, 26 Jun 2022 15:09:36 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20cascader=E7=BA=A7?=
 =?UTF-8?q?=E8=81=94=E9=80=89=E6=8B=A9=E5=99=A8=20=E6=96=B0=E5=A2=9EonlyLa?=
 =?UTF-8?q?stLevel=E5=B1=9E=E6=80=A7=20=E6=8E=A7=E5=88=B6displayValue?=
 =?UTF-8?q?=E5=9B=9E=E6=98=BE=E6=95=B0=E6=8D=AE=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/cascader/index.vue          | 62 +++++++------------
 .../src/document/zh-CN/components/cascader.md | 15 ++++-
 2 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index 3acf19f2..d259b220 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -1,48 +1,23 @@
 <template>
-  <lay-dropdown
-    class="layui-cascader"
-    ref="dropdownRef"
-    :autoFitMinWidth="false"
-    :updateAtScroll="true"
-  >
-    <lay-input
-      v-model="displayValue"
-      readonly
-      suffix-icon="layui-icon-down"
-      :placeholder="placeholder"
-      v-if="!slots.default"
-    ></lay-input>
+  <lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true">
+    <lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
+      v-if="!slots.default"></lay-input>
     <slot v-else></slot>
 
     <template #content>
       <div class="layui-cascader-panel">
         <template v-for="(itemCol, index) in treeData">
-          <lay-scroll
-            height="180px"
-            class="layui-cascader-menu"
-            :key="'cascader-menu' + index"
-            v-if="itemCol.data.length"
-          >
-            <div
-              class="layui-cascader-menu-item"
-              v-for="(item, i) in itemCol.data"
-              :key="index + i"
-              @click="selectBar(item, i, index)"
-              :class="[
+          <lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
+            v-if="itemCol.data.length">
+            <div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
+              @click="selectBar(item, i, index)" :class="[
                 {
                   'layui-cascader-selected': itemCol.selectIndex === i,
                 },
-              ]"
-            >
-              <slot
-                :name="item.slot"
-                v-if="item.slot && slots[item.slot]"
-              ></slot>
+              ]">
+              <slot :name="item.slot" v-if="item.slot && slots[item.slot]"></slot>
               <template v-else>{{ item.label }}</template>
-              <i
-                class="layui-icon layui-icon-right"
-                v-if="item.children && item.children.length"
-              ></i>
+              <i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
             </div>
           </lay-scroll>
         </template>
@@ -68,12 +43,14 @@ export interface LayCascaderProps {
   modelValue?: string;
   decollator?: string;
   placeholder?: string;
+  onlyLastLevel?: boolean
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
   modelValue: "",
   decollator: "/",
   placeholder: "",
+  onlyLastLevel: false
 });
 const emit = defineEmits(["update:modelValue", "change", "clear"]);
 
@@ -195,11 +172,16 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
       }
     }
     extractData(treeData.value, data, 0);
-    displayValue.value = data
-      .map((e: any) => {
-        return e.label;
-      })
-      .join(` ${props.decollator} `);
+    if (!props.onlyLastLevel) {
+      displayValue.value = data
+        .map((e: any) => {
+          return e.label;
+        })
+        .join(` ${props.decollator} `);
+    } else {
+      let _data = data.map((e: any) => { return e.label; })
+      displayValue.value = _data[_data.length - 1];
+    }
     let value = data
       .map((e: any) => {
         return e.value;
diff --git a/package/document-component/src/document/zh-CN/components/cascader.md b/package/document-component/src/document/zh-CN/components/cascader.md
index 7b4e7e9a..4386dac8 100644
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@@ -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 | 选中后数据改变的回调 |