diff --git a/src/area/README.md b/src/area/README.md
index ac5541483..be2f1affc 100644
--- a/src/area/README.md
+++ b/src/area/README.md
@@ -84,6 +84,8 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 | Name | Description |
 |------|------|
 | title `v2.5.3` | Custom title |
+| columns-top `v2.5.3` | Custom content above columns |
+| columns-bottom `v2.5.3` | Custom content below columns |
 
 ### Methods
 
diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md
index 577014b93..f61467579 100644
--- a/src/area/README.zh-CN.md
+++ b/src/area/README.zh-CN.md
@@ -83,6 +83,8 @@ Vue.use(Area);
 | 名称 | 说明 |
 |------|------|
 | title `v2.5.3` | 自定义标题内容 |
+| columns-top `v2.5.3` | 自定义选项上方内容 |
+| columns-bottom `v2.5.3` | 自定义选项下方内容 |
 
 ### 方法
 
diff --git a/src/area/index.js b/src/area/index.js
index d25c5b308..377822a79 100644
--- a/src/area/index.js
+++ b/src/area/index.js
@@ -305,7 +305,11 @@ export default createComponent({
         visibleItemCount={this.visibleItemCount}
         cancelButtonText={this.cancelButtonText}
         confirmButtonText={this.confirmButtonText}
-        scopedSlots={pickSlots(this, ['title'])}
+        scopedSlots={pickSlots(this, [
+          'title',
+          'columns-top',
+          'columns-bottom',
+        ])}
         {...{ on }}
       />
     );
diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap
index 80f92f336..da2f19ac6 100644
--- a/src/area/test/__snapshots__/index.spec.js.snap
+++ b/src/area/test/__snapshots__/index.spec.js.snap
@@ -114,6 +114,26 @@ exports[`columns-num prop 1`] = `
 </div>
 `;
 
+exports[`columns-top、columns-bottom slot 1`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+  <!---->Top<div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>Bottom
+  <!---->
+</div>
+`;
+
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
diff --git a/src/area/test/index.spec.js b/src/area/test/index.spec.js
index 9a440fdf4..633342081 100644
--- a/src/area/test/index.spec.js
+++ b/src/area/test/index.spec.js
@@ -139,3 +139,15 @@ test('title slot', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('columns-top、columns-bottom slot', async () => {
+  const wrapper = mount(Area, {
+    slots: {
+      'columns-top': 'Top',
+      'columns-bottom': 'Bottom',
+    },
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/picker/README.md b/src/picker/README.md
index ca4e4c6be..d28492a90 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -288,6 +288,8 @@ Picker events will pass different parameters according to the columns are single
 |------|------|
 | default | Custom toolbar content |
 | title | Custom title |
+| columns-top | Custom content above columns |
+| columns-bottom | Custom content below columns |
 
 ### Data Structure of Column