diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index 4fc6e99a7..b5f8bb210 100644
--- a/src/cascader/README.zh-CN.md
+++ b/src/cascader/README.zh-CN.md
@@ -48,10 +48,11 @@ export default {
 
 ### Events
 
-| 事件    | 说明             | 回调参数 |
-| ------- | ---------------- | -------- |
-| change  | 选中项变化时触发 | -        |
-| confirm | 确认选择时触发   | -        |
+| 事件   | 说明                   | 回调参数                               |
+| ------ | ---------------------- | -------------------------------------- |
+| change | 选中项变化时触发       | `{ value, selectedOptions, tabIndex }` |
+| finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` |
+| close  | 点击关闭图标时触发     | -                                      |
 
 ### Slots
 
diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue
index 2670ce044..680ec6587 100644
--- a/src/cascader/demo/index.vue
+++ b/src/cascader/demo/index.vue
@@ -5,14 +5,16 @@
         is-link
         readonly
         :label="t('area')"
+        :value="base.value"
         :placeholder="t('selectArea')"
-        @click="showBase = true"
+        @click="base.show = true"
       />
-      <van-popup v-model="showBase" round position="bottom">
+      <van-popup v-model="base.show" round position="bottom">
         <van-cascader
           :title="t('selectArea')"
           :options="t('options')"
-          @close="showBase = false"
+          @close="base.show = false"
+          @finish="onFinish"
         />
       </van-popup>
     </demo-block>
@@ -37,8 +39,18 @@ export default {
 
   data() {
     return {
-      showBase: false,
+      base: {
+        show: false,
+        value: '',
+      },
     };
   },
+
+  methods: {
+    onFinish({ selectedOptions }) {
+      this.base.show = false;
+      this.base.value = selectedOptions.map((option) => option.text).join('/');
+    },
+  },
 };
 </script>
diff --git a/src/cascader/index.js b/src/cascader/index.js
index 2e182d7e3..297a6d7bc 100644
--- a/src/cascader/index.js
+++ b/src/cascader/index.js
@@ -46,17 +46,15 @@ export default createComponent({
       } else {
         this.tabs = [
           {
-            title: this.placeholder || this.t('placeholder'),
             options: this.options,
-            selected: null,
+            selectedOption: null,
           },
         ];
       }
     },
 
     onSelect(option, tabIndex) {
-      this.tabs[tabIndex].title = option.text;
-      this.tabs[tabIndex].selected = option.value;
+      this.tabs[tabIndex].selectedOption = option;
 
       if (this.tabs.length > tabIndex + 1) {
         this.tabs = this.tabs.slice(0, tabIndex + 1);
@@ -64,9 +62,8 @@ export default createComponent({
 
       if (option.children) {
         const nextTab = {
-          title: this.placeholder || this.t('placeholder'),
           options: option.children,
-          selected: null,
+          selectedOption: null,
         };
 
         if (this.tabs[tabIndex + 1]) {
@@ -79,6 +76,17 @@ export default createComponent({
           this.activeTab++;
         });
       }
+
+      const eventParams = {
+        value: option.value,
+        tabIndex,
+        selectedOptions: this.tabs.map((tab) => tab.selectedOption),
+      };
+      this.$emit('change', eventParams);
+
+      if (!option.children) {
+        this.$emit('finish', eventParams);
+      }
     },
 
     onClose() {
@@ -100,27 +108,45 @@ export default createComponent({
       );
     },
 
-    renderOptions(options, selected, tabIndex) {
+    renderOptions(options, selectedOption, tabIndex) {
+      const renderOption = (option) => {
+        const isSelected =
+          selectedOption && option.value === selectedOption.value;
+
+        return (
+          <li
+            class={bem('option', { selected: isSelected })}
+            style={{ color: isSelected ? this.activeColor : null }}
+            onClick={() => {
+              this.onSelect(option, tabIndex);
+            }}
+          >
+            <span>{option.text}</span>
+            {isSelected ? (
+              <Icon name="success" class={bem('selected-icon')} />
+            ) : null}
+          </li>
+        );
+      };
+
+      return <ul class={bem('options')}>{options.map(renderOption)}</ul>;
+    },
+
+    renderTab(item, tabIndex) {
+      const { options, selectedOption } = item;
+      const title = selectedOption
+        ? selectedOption.text
+        : this.placeholder || this.t('placeholder');
+
       return (
-        <ul class={bem('options')}>
-          {options.map((option) => {
-            const isSelected = option.value === selected;
-            return (
-              <li
-                class={bem('option', { selected: isSelected })}
-                style={{ color: isSelected ? this.activeColor : null }}
-                onClick={() => {
-                  this.onSelect(option, tabIndex);
-                }}
-              >
-                <span>{option.text}</span>
-                {isSelected ? (
-                  <Icon name="success" class={bem('selected-icon')} />
-                ) : null}
-              </li>
-            );
+        <Tab
+          title={title}
+          titleClass={bem('tab-title', {
+            unselected: !selectedOption,
           })}
-        </ul>
+        >
+          {this.renderOptions(options, selectedOption, tabIndex)}
+        </Tab>
       );
     },
 
@@ -133,14 +159,7 @@ export default createComponent({
           class={bem('tabs')}
           color={this.activeColor}
         >
-          {this.tabs.map((item, tabIndex) => (
-            <Tab
-              title={item.title}
-              titleClass={bem('tab-title', { unselected: !item.selected })}
-            >
-              {this.renderOptions(item.options, item.selected, tabIndex)}
-            </Tab>
-          ))}
+          {this.tabs.map(this.renderTab)}
         </Tabs>
       );
     },