From fe99ab0c1f03a988b0b09a0f7660992edf5c4d7b 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: Fri, 8 Jul 2022 10:18:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20cascader=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E6=96=B0=E5=A2=9EreplaceFields=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=20=E7=94=A8=E4=BA=8E=E8=87=AA=E4=B9=89=E5=AE=9Akey?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/cascader/index.vue          | 26 +++++---
 .../src/document/zh-CN/components/cascader.md | 60 ++++++++++++++++++-
 .../src/document/zh-CN/guide/changelog.md     |  1 +
 3 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index 1cdd44e9..56cdc749 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -44,6 +44,7 @@ export interface LayCascaderProps {
   decollator?: string;
   placeholder?: string;
   onlyLastLevel?: boolean;
+  replaceFields?: { label: string, value: string, children: string }
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
@@ -51,6 +52,13 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   decollator: "/",
   placeholder: "",
   onlyLastLevel: false,
+  replaceFields: () => {
+    return {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    }
+  }
 });
 const emit = defineEmits(["update:modelValue", "change", "clear"]);
 
@@ -110,7 +118,7 @@ const initTreeData = () => {
 };
 
 function getMaxFloor(treeData: any) {
-  let floor = 0;
+  //let floor = 0;
   let max = 0;
   function each(data: any, floor: any) {
     data.forEach((e: any) => {
@@ -118,8 +126,8 @@ function getMaxFloor(treeData: any) {
       if (floor > max) {
         max = floor;
       }
-      if (e.children && e.children.length > 0) {
-        each(e.children, floor + 1);
+      if (e[props.replaceFields.children] && e[props.replaceFields.children].length > 0) {
+        each(e[props.replaceFields.children], floor + 1);
       }
     });
   }
@@ -132,16 +140,16 @@ function findData(orginData: any, level: number) {
     const element = orginData[i];
     if (level === 1) {
       data.push({
-        value: element.value,
-        label: element.label,
+        value: element[props.replaceFields.value],
+        label: element[props.replaceFields.label],
         slot: element.slot || false,
-        children: element.children ?? false,
-        orginData:element
+        children: element[props.replaceFields.children] ?? false,
+        orginData: element
       });
     }
 
-    if (level !== 1 && element.children && element.children.length > 0) {
-      findData(element.children, level - 1);
+    if (level !== 1 && element[props.replaceFields.children] && element[props.replaceFields.children].length > 0) {
+      findData(element[props.replaceFields.children], level - 1);
     }
   }
   return data;
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 ba157efe..9e97aff8 100644
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@@ -300,6 +300,7 @@ const options = [
   <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
   <span style="margin-left:20px">输出的值：{{value1}}</span>
 </template>
+
 <script setup>
 import { ref } from "vue";
 const value1=ref(null)
@@ -628,6 +629,62 @@ const options2 = [
 
 :::
 
+::: title Cascader 自定义字段名
+:::
+::: demo 也许你当前数据键名并不是`label`、`value`、`children`,这时只需要使用replaceFields属性来自定义key
+<template>
+  <lay-cascader :options="options3" :replaceFields="replaceFields" placeholder="自义定key"></lay-cascader>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const replaceFields={
+  label:'name',
+  value:'id',
+  children:'group'
+}
+const options3=[
+  {
+    name:"张三",
+    id:1,
+    group:[
+      {
+        name:"张三-1",
+        id:2
+      },
+      {
+        name:"张三-2",
+        id:3
+      },
+      {
+        name:"张三-3",
+        id:4
+      }
+    ]
+  },
+  {
+    name:"李四",
+    id:5,
+    group:[
+      {
+        name:"李四-1",
+        id:6
+      },
+      {
+        name:"李四-2",
+        id:7
+      },
+      {
+        name:"李四-3",
+        id:8
+      }
+    ]
+  }
+]
+</script>
+
+:::
+
 ::: title Cascader 属性
 :::
 
@@ -639,7 +696,8 @@ const options2 = [
 | v-model / modelValue     | 值                   | 
 | decollator               | 分割符号，默认为 /     |
 | options                  | 选项参数 格式请见上面的demo  |
-| onlyLastLevel            | 回显displayValue仅显示最后一级，默认为 `false`  |
+| onlyLastLevel            | 回显display仅显示最后一级，默认为 `false`  |
+| replaceFields            | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例  |
 :::
 
 ::: title Cascader 事件
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 49981b2b..ee808e0c 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -18,6 +18,7 @@
         <ul>
           <li>[修复] layer 组件 Notify 关闭图标样式问题。 by @SmallWai</li>
           <li>[优化] cascader 组件 优化change回调参数 by @SmallWai</li>
+          <li>[新增] cascader 组件 新增replaceFields属性 用于自义定key by @SmallWai</li>
         </ul>
       </li>
     </ul>