diff --git a/package/component/src/component/cascader/index.less b/package/component/src/component/cascader/index.less
new file mode 100644
index 00000000..1f1e49bc
--- /dev/null
+++ b/package/component/src/component/cascader/index.less
@@ -0,0 +1,55 @@
+.layui-cascader {
+  position: relative;
+}
+.layui-cascader .layui-icon-down {
+  transition: all 0.3s ease-in-out;
+  transform: rotate(0);
+}
+.layui-cascader-open .layui-icon-down {
+  transform: rotate(180deg);
+}
+
+.layui-cascader .layui-cascader-panel {
+  position: absolute;
+  margin-top: 2px;
+  z-index: 899;
+  background-color: #fff;
+  box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  border-radius: 2px;
+  box-shadow: 0 2px 12px #0000001a;
+  line-height: 26px;
+  color: #000c;
+  font-size: 14px;
+  white-space: nowrap;
+  display: none;
+}
+.layui-cascader-menu {
+  border-right: 1px solid var(--global-neutral-color-3);
+  max-height: 360px;
+  overflow-y: scroll;
+}
+.layui-cascader-menu:last-child {
+  border-right: none;
+}
+.layui-cascader-menu-item {
+  min-width: 130px;
+  padding: 5px 15px;
+  box-sizing: border-box;
+  transition: all 0.1s ease-in-out;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 9px;
+}
+.layui-cascader-menu-item:hover {
+  background-color: var(--global-checked-color);
+  color: white;
+}
+.layui-cascader-selected {
+  background-color: var(--global-checked-color);
+  color: white;
+}
+.layui-cascader-open .layui-cascader-panel {
+  display: flex !important;
+}
diff --git a/package/component/src/component/cascader/index.ts b/package/component/src/component/cascader/index.ts
new file mode 100644
index 00000000..bc751ebc
--- /dev/null
+++ b/package/component/src/component/cascader/index.ts
@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;
diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
new file mode 100644
index 00000000..9616acae
--- /dev/null
+++ b/package/component/src/component/cascader/index.vue
@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="layui-cascader"
+    :class="[{ 'layui-cascader-open': open }]"
+    ref="cascaderRef"
+  >
+    <div @click="open = !open">
+      <lay-input
+        v-model="displayValue"
+        readonly
+        suffix-icon="layui-icon-down"
+        :placeholder="placeholder"
+        v-if="!slots.default"
+      ></lay-input>
+      <slot v-else></slot>
+    </div>
+
+    <dl class="layui-cascader-panel layui-anim layui-anim-upbit">
+      <template v-for="(itemCol, index) in treeData">
+        <ul
+          class="layui-cascader-menu"
+          :key="'cascader-menu' + index"
+          v-if="itemCol.data.length"
+        >
+          <li
+            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,
+              },
+            ]"
+          >
+            {{ item.label }}
+            <i
+              class="layui-icon layui-icon-right"
+              v-if="item.children && item.children.length"
+            ></i>
+          </li>
+        </ul>
+      </template>
+    </dl>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayCascader",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { ref, onMounted, watch, useSlots } from "vue";
+import { onClickOutside } from "@vueuse/core";
+export interface LayCascaderProps {
+  options?: Array<any> | null;
+  modelValue?: string;
+  decollator?: string;
+  placeholder?:string;
+}
+const props = withDefaults(defineProps<LayCascaderProps>(), {
+  options: null,
+  modelValue: "",
+  decollator: "/",
+  placeholder:''
+});
+const emit = defineEmits(["update:modelValue", "change", "clear"]);
+
+onMounted(() => {
+  initTreeData();
+});
+
+watch(
+  () => props.options,
+  () => {
+    initTreeData();
+  }
+);
+
+const treeData = ref<any>([]);
+const initTreeData = () => {
+  let treeLvNum = getMaxFloor(props.options);
+  for (let index = 0; index < treeLvNum; index++) {
+    if (index == 0) {
+      treeData.value[0] = {
+        selectIndex: null,
+        data: findData(props.options, 1),
+      };
+    } else {
+      treeData.value[index] = {
+        selectIndex: null,
+        data: [],
+      };
+    }
+  }
+
+  //数据回显
+  if (props.modelValue) {
+    try {
+      let valueData = props.modelValue.split(props.decollator);
+      let data: any[] = [];
+      for (let index = 0; index < treeData.value.length; index++) {
+        const element = treeData.value[index];
+        const nowValue = valueData[index];
+        for (let i = 0; i < element.length; i++) {
+          const ele = element[i];
+          if (nowValue === ele.value) {
+            data.push(ele);
+            element.selectIndex = i;
+          }
+        }
+      }
+      displayValue.value = data
+        .map((e) => {
+          return e.label;
+        })
+        .join(` ${props.decollator} `);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};
+
+function getMaxFloor(treeData: any) {
+  let floor = 0;
+  let max = 0;
+  function each(data: any, floor: any) {
+    data.forEach((e: any) => {
+      e.floor = floor;
+      if (floor > max) {
+        max = floor;
+      }
+      if (e.children && e.children.length > 0) {
+        each(e.children, floor + 1);
+      }
+    });
+  }
+  each(treeData, 1);
+  return max;
+}
+function findData(orginData: any, level: number) {
+  let data: any[] = [];
+  for (let i = 0; i < orginData.length; i++) {
+    const element = orginData[i];
+    if (level === 1) {
+      data.push({
+        value: element.value,
+        label: element.label,
+        children: element.children ?? false,
+      });
+    }
+
+    if (level !== 1 && element.children && element.children.length > 0) {
+      findData(element.children, level - 1);
+    }
+  }
+  return data;
+}
+
+const dataContainer = ref<any>([]);
+const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
+  treeData.value[parentIndex].selectIndex = selectIndex;
+  if (item.children) {
+    treeData.value[parentIndex + 1].selectIndex = null;
+    treeData.value[parentIndex + 1].data = findData(item.children, 1);
+  }
+  //把数组里后面的数据清空
+  let nextIndex = parentIndex + 2;
+  for (let index = nextIndex; index < treeData.value.length; index++) {
+    treeData.value[index].selectIndex = null;
+    treeData.value[index].data = [];
+  }
+
+  if (!item.children) {
+    //输入框数据更新
+    let data: never[] = [];
+    function extractData(orginData: any, dataContainer: any, index: number) {
+      const element = orginData[index].data;
+      const selectIndex = orginData[index].selectIndex;
+      const selectData = element[selectIndex];
+      dataContainer.push(selectData);
+      if (selectData.children && selectData.children.length > 0) {
+        extractData(orginData, dataContainer, index + 1);
+      }
+    }
+    extractData(treeData.value, data, 0);
+    displayValue.value = data
+      .map((e: any) => {
+        return e.label;
+      })
+      .join(` ${props.decollator} `);
+    let value = data
+      .map((e: any) => {
+        return e.value;
+      })
+      .join(props.decollator);
+    emit("update:modelValue", value);
+    emit("change", displayValue.value);
+    open.value = false;
+  }
+};
+
+const open = ref<boolean>(false);
+const displayValue = ref<string | number | null>(null);
+const slots = useSlots();
+const cascaderRef = ref<null | HTMLElement>();
+onClickOutside(cascaderRef, () => {
+  open.value = false;
+});
+</script>
diff --git a/package/component/src/index.ts b/package/component/src/index.ts
index d8ecfdc9..9e198334 100644
--- a/package/component/src/index.ts
+++ b/package/component/src/index.ts
@@ -85,6 +85,7 @@ import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
 import LayNoticeBar from "./component/noticeBar/index";
 import LayPageHeader from "./component/pageHeader/index";
+import LayCascader from "./component/cascader/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -168,6 +169,7 @@ const components: Record<string, Plugin> = {
   LayRipple,
   LayNoticeBar,
   LayPageHeader,
+  LayCascader,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -258,6 +260,7 @@ export {
   LayRipple,
   LayNoticeBar,
   LayPageHeader,
+  LayCascader,
   install,
 };
 
diff --git a/package/document/src/document/zh-CN/components/cascader.md b/package/document/src/document/zh-CN/components/cascader.md
new file mode 100644
index 00000000..8f08dfc9
--- /dev/null
+++ b/package/document/src/document/zh-CN/components/cascader.md
@@ -0,0 +1,360 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-cascader` 标签创建级联选择器
+
+<template>
+  <lay-cascader :options="options" v-model="value" placeholder="点我试一试"></lay-cascader>
+  <br>
+  <span>输出的值：{{value}}</span>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const value=ref(null)
+const options = [
+	{
+		value: "Guide",
+		label: "指南",
+		children: [
+			{
+				value: "shejiyuanze",
+				label: "设计原则",
+				children: [
+					{
+						value: "yizhi",
+						label: "一致",
+					},
+					{
+						value: "fankui",
+						label: "反馈",
+					},
+					{
+						value: "xiaolv",
+						label: "效率",
+					},
+					{
+						value: "kekong",
+						label: "可控",
+					},
+				],
+			},
+			{
+				value: "daohang",
+				label: "导航",
+				children: [
+					{
+						value: "cexiangdaohang",
+						label: "侧向导航",
+					},
+					{
+						value: "dingbudaohang",
+						label: "顶部导航",
+					},
+				],
+			},
+		],
+	},
+	{
+		value: "Components",
+		label: "组件",
+		children: [
+			{
+				value: "basic",
+				label: "Basic",
+				children: [
+					{
+						value: "layout",
+						label: "Layout 布局",
+					},
+					{
+						value: "color",
+						label: "Color 色彩",
+					},
+					{
+						value: "typography",
+						label: "Typography 字体",
+					},
+					{
+						value: "icon",
+						label: "Icon 图标",
+					},
+					{
+						value: "button",
+						label: "Button 按钮",
+					},
+				],
+			},
+			{
+				value: "form",
+				label: "Form",
+				children: [
+					{
+						value: "radio",
+						label: "Radio 单选框",
+					},
+					{
+						value: "checkbox",
+						label: "Checkbox 多选框",
+					},
+					{
+						value: "input",
+						label: "Input 输入框",
+					},
+					{
+						value: "input-number",
+						label: "InputNumber 计数器",
+					},
+					{
+						value: "select",
+						label: "Select 选择器",
+					},
+					{
+						value: "cascader",
+						label: "Cascader 级联选择器",
+					},
+					{
+						value: "switch",
+						label: "Switch 开关",
+					},
+					{
+						value: "slider",
+						label: "Slider 滑块",
+					},
+					{
+						value: "time-picker",
+						label: "TimePicker 时间选择器",
+					},
+					{
+						value: "date-picker",
+						label: "DatePicker 日期选择器",
+					},
+					{
+						value: "datetime-picker",
+						label: "DateTimePicker 日期时间选择器",
+					},
+					{
+						value: "upload",
+						label: "Upload 上传",
+					},
+					{
+						value: "rate",
+						label: "Rate 评分",
+					},
+					{
+						value: "form",
+						label: "Form 表单",
+					},
+				],
+			},
+			{
+				value: "data",
+				label: "Data",
+				children: [
+					{
+						value: "table",
+						label: "Table 表格",
+					},
+					{
+						value: "tag",
+						label: "Tag 标签",
+					},
+					{
+						value: "progress",
+						label: "Progress 进度条",
+					},
+					{
+						value: "tree",
+						label: "Tree 树形控件",
+					},
+					{
+						value: "pagination",
+						label: "Pagination 分页",
+					},
+					{
+						value: "badge",
+						label: "Badge 标记",
+					},
+				],
+			},
+			{
+				value: "notice",
+				label: "Notice",
+				children: [
+					{
+						value: "alert",
+						label: "Alert 警告",
+					},
+					{
+						value: "loading",
+						label: "Loading 加载",
+					},
+					{
+						value: "message",
+						label: "Message 消息提示",
+					},
+					{
+						value: "message-box",
+						label: "MessageBox 弹框",
+					},
+					{
+						value: "notification",
+						label: "Notification 通知",
+					},
+				],
+			},
+			{
+				value: "navigation",
+				label: "Navigation",
+				children: [
+					{
+						value: "menu",
+						label: "NavMenu 导航菜单",
+					},
+					{
+						value: "tabs",
+						label: "Tabs 标签页",
+					},
+					{
+						value: "breadcrumb",
+						label: "Breadcrumb 面包屑",
+					},
+					{
+						value: "dropdown",
+						label: "Dropdown 下拉菜单",
+					},
+					{
+						value: "steps",
+						label: "Steps 步骤条",
+					},
+				],
+			},
+			{
+				value: "others",
+				label: "Others",
+				children: [
+					{
+						value: "dialog",
+						label: "Dialog 对话框",
+					},
+					{
+						value: "tooltip",
+						label: "Tooltip 文字提示",
+					},
+					{
+						value: "popover",
+						label: "Popover 弹出框",
+					},
+					{
+						value: "card",
+						label: "Card 卡片",
+					},
+					{
+						value: "carousel",
+						label: "Carousel 走马灯",
+					},
+					{
+						value: "collapse",
+						label: "Collapse 折叠面板",
+					},
+				],
+			},
+		],
+	},
+	{
+		value: "Resource",
+		label: "资源",
+		children: [
+			{
+				value: "axure",
+				label: "Axure Components",
+			},
+			{
+				value: "sketch",
+				label: "Sketch Templates",
+			},
+			{
+				value: "jiaohu",
+				label: "组件交互文档",
+			},
+		],
+	},
+];
+</script>
+
+:::
+
+::: title 自定义分割符号
+:::
+::: demo 使用 `decollator` 属性 自定义分割符号
+<template>
+  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号"></lay-cascader>
+  <br>
+  <span>输出的值：{{value1}}</span>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const value1=ref(null)
+</script>
+:::
+
+
+::: title Cascader 插槽
+:::
+::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值
+<template>
+  <lay-cascader :options="options" v-model="value2" @change="onChange">
+     <lay-button type="normal">Click me ❤️</lay-button>
+     <lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
+  </lay-cascader>
+  <br>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const value2=ref(null)
+const displayValue=ref(null)
+const onChange=(val)=>{
+  displayValue.value=val
+}
+</script>
+
+:::
+
+::: title Cascader 属性
+:::
+
+::: table
+
+| 属性                     | 描述                  |
+| -----------------------  | -------------------- |
+| placeholder              | 提示信息              | 
+| v-model / modelValue     | 值                   | 
+| decollator               | 分割符号，默认为 /     |
+| options                  | 选项参数 格式请见上面的demo  |
+
+:::
+
+::: title Cascader 事件
+:::
+
+::: table
+
+| 属性 | 描述         |
+| ---- | ------------ |
+| change | 选中后数据改变的回调 |
+
+:::
+
+::: previousNext cascader
+:::
diff --git a/package/document/src/document/zh-CN/components/datePicker.md b/package/document/src/document/zh-CN/components/datePicker.md
index 4de00a5e..24166a8e 100644
--- a/package/document/src/document/zh-CN/components/datePicker.md
+++ b/package/document/src/document/zh-CN/components/datePicker.md
@@ -238,5 +238,5 @@ export default {
 
 :::
 
-::: previousNext transfer
+::: previousNext datePicker
 :::
\ No newline at end of file
diff --git a/package/document/src/router/zh-CN.ts b/package/document/src/router/zh-CN.ts
index 3e806c9e..f1dcea73 100644
--- a/package/document/src/router/zh-CN.ts
+++ b/package/document/src/router/zh-CN.ts
@@ -398,6 +398,11 @@ const zhCN = [
             component: () =>import("../document/zh-CN/components/pageHeader.md"),
             meta: { title: "页头" },
           },
+          {
+            path: "/zh-CN/components/Cascader",
+            component: () =>import("../document/zh-CN/components/cascader.md"),
+            meta: { title: "级联选择器" },
+          },
         ],
       },
     ],
diff --git a/package/document/src/view/utils/menus.ts b/package/document/src/view/utils/menus.ts
index c30c5c80..a32348bd 100644
--- a/package/document/src/view/utils/menus.ts
+++ b/package/document/src/view/utils/menus.ts
@@ -189,6 +189,12 @@ const menus = [
         subTitle: "datePicker",
         path: "/zh-CN/components/datePicker",
       },
+      {
+        id: 40,
+        title: "级联选择器",
+        subTitle: "cascader",
+        path: "/zh-CN/components/cascader",
+      },
       {
         id: 40,
         title: "文件上传",