diff --git a/packages/area/index.vue b/packages/area/index.vue
index 4f5b3a16a..2bd678316 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -30,9 +30,12 @@ export default create({
     value: String,
     title: String,
     loading: Boolean,
-    areaList: Object,
     itemHeight: Number,
     visibleItemCount: Number,
+    areaList: {
+      type: Object,
+      default: () => ({})
+    },
     columnsNum: {
       type: [String, Number],
       default: 3
@@ -67,21 +70,21 @@ export default create({
   watch: {
     value() {
       this.code = this.value;
-    },
-
-    code() {
       this.setValues();
     },
 
     areaList: {
       deep: true,
-      immediate: true,
       handler() {
-        this.$nextTick(this.setValues);
+        this.setValues();
       }
     }
   },
 
+  mounted() {
+    this.setValues();
+  },
+
   methods: {
     // get list by code
     getList(type, code) {
@@ -120,9 +123,8 @@ export default create({
 
     onChange(picker, values, index) {
       this.code = values[index].code;
-      this.$nextTick(() => {
-        this.$emit('change', picker, values, index);
-      });
+      this.setValues();
+      this.$emit('change', picker, values, index);
     },
 
     setValues() {
@@ -143,13 +145,11 @@ export default create({
       }
 
       picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
-      this.$nextTick(() => {
-        picker.setIndexes([
-          this.getIndex('province', code),
-          this.getIndex('city', code),
-          this.getIndex('county', code)
-        ]);
-      });
+      picker.setIndexes([
+        this.getIndex('province', code),
+        this.getIndex('city', code),
+        this.getIndex('county', code)
+      ]);
     },
 
     getValues() {
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index 318820174..456e09786 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -33,13 +33,22 @@ exports[`change option 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">北京市</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">和平区</li>
+        <li class="van-ellipsis van-picker-column__item">河东区</li>
+      </ul>
     </div>
     <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
@@ -56,20 +65,29 @@ exports[`change option 3`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">北京市</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">和平区</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">河东区</li>
+      </ul>
     </div>
     <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
 </div>
 `;
 
-exports[`watch code 1`] = `
+exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div class="van-picker__cancel">取消</div>
@@ -92,7 +110,7 @@ exports[`watch code 1`] = `
 </div>
 `;
 
-exports[`watch code 2`] = `
+exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div class="van-picker__cancel">取消</div>
@@ -115,7 +133,7 @@ exports[`watch code 2`] = `
 </div>
 `;
 
-exports[`watch code 3`] = `
+exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div class="van-picker__cancel">取消</div>
@@ -131,17 +149,23 @@ exports[`watch code 3`] = `
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
     </div>
     <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
 </div>
 `;
 
-exports[`watch code 4`] = `
+exports[`watch areaList & code 4`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div class="van-picker__cancel">取消</div>
@@ -157,10 +181,16 @@ exports[`watch code 4`] = `
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="line-height: 44px;"></ul>
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
     </div>
     <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
diff --git a/packages/area/test/index.spec.js b/packages/area/test/index.spec.js
index 557cc47da..d74113df0 100644
--- a/packages/area/test/index.spec.js
+++ b/packages/area/test/index.spec.js
@@ -2,6 +2,12 @@ import Area from '..';
 import areaList from '../demo/area.simple';
 import { mount, later, triggerDrag } from '../../../test/utils';
 
+const firstOption = [
+  { code: '110000', name: '北京市' },
+  { code: '110100', name: '北京市' },
+  { code: '110101', name: '东城区' }
+];
+
 test('confirm & cancel event', async() => {
   const wrapper = mount(Area, {
     propsData: {
@@ -14,11 +20,11 @@ test('confirm & cancel event', async() => {
   wrapper.find('.van-picker__confirm').trigger('click');
   wrapper.find('.van-picker__cancel').trigger('click');
 
-  expect(wrapper.emitted('confirm')).toBeTruthy();
-  expect(wrapper.emitted('cancel')[0][0]).toBeTruthy();
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(firstOption);
+  expect(wrapper.emitted('cancel')[0][0]).toEqual(firstOption);
 });
 
-test('watch code', async() => {
+test('watch areaList & code', async() => {
   const wrapper = mount(Area, {
     propsData: {
       areaList
@@ -57,9 +63,9 @@ test('change option', () => {
 test('getValues method', () => {
   const wrapper = mount(Area, {
     propsData: {
-      areaList: {}
+      areaList
     }
   });
 
-  expect(wrapper.vm.getValues()).toBeTruthy();
+  expect(wrapper.vm.getValues()).toEqual(firstOption);
 });
diff --git a/packages/picker/PickerColumn.vue b/packages/picker/PickerColumn.vue
index 29cfecc96..a96cf63e0 100644
--- a/packages/picker/PickerColumn.vue
+++ b/packages/picker/PickerColumn.vue
@@ -144,7 +144,7 @@ export default create({
     },
 
     setIndex(index, userAction) {
-      index = this.adjustIndex(index);
+      index = this.adjustIndex(index) || 0;
       this.offset = -index * this.itemHeight;
 
       if (index !== this.currentIndex) {