diff --git a/example/App.vue b/example/App.vue
index 26788ed15..b18306415 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -56,6 +56,10 @@
             path: '/picker',
             text: 'Picker'
           },
+          {
+            path: '/cascade-picker',
+            text: 'CascadePicker'
+          },
           {
             path: '/time-picker',
             text: 'TimePicker'
diff --git a/example/components/date-picker.vue b/example/components/date-picker.vue
index 1bf976230..1c452bf21 100644
--- a/example/components/date-picker.vue
+++ b/example/components/date-picker.vue
@@ -1,13 +1,12 @@
 <template>
-  <cube-picker
-    ref="picker"
-    title="Choose Date"
-    :data="dateData"
+  <cube-cascade-picker
+    ref="cascadePicker"
+    title="Date Picker"
+    :data="data"
     :selectedIndex="selectedIndex"
-    @change="change"
     @select="select"
     @cancel="cancel">
-  </cube-picker>
+  </cube-cascade-picker>
 </template>
 
 <script>
@@ -39,115 +38,49 @@
     },
     data() {
       return {
-        dateData: [],
-        tempIndex: [0, 0, 0],
-        years: [],
-        months: [],
-        days: [],
-        year: 0,
-        month: 0,
-        day: 0
       }
     },
-    watch: {
-      year() {
-        this.updateMonths()
-      },
-      month() {
-        this.updateDays()
+    computed: {
+      data() {
+        let data = range(this.min[0], this.max[0], false, '年')
+
+        data.forEach(year => {
+          let minMonth = year.value === this.min[0] ? this.min[1] : 1
+          let maxMonth = year.value === this.max[0] ? this.max[1] : 12
+
+          year.children = range(minMonth, maxMonth, false, '月')
+          year.children.forEach(month => {
+            let day = 30
+            if ([1, 3, 5, 7, 8, 10, 12].includes(month.value)) {
+              day = 31
+            } else {
+              if (month.value === 2) {
+                day = !(year.value % 400) || (!(year.value % 4) && year.value % 100) ? 29 : 28
+              }
+            }
+
+            let minDay = year.value === this.min[0] && month.value === this.min[1] ? this.min[2] : 1
+            let maxDay = year.value === this.max[0] && month.value === this.max[1] ? this.max[2] : day
+
+            month.children = range(minDay, maxDay, false, '日')
+          })
+        })
+
+        return data
       }
     },
     methods: {
       show() {
-        this.$refs.picker.show()
-        this.years = range(this.min[0], this.max[0], false, '年')
-        this.year = this.years[this.selectedIndex[0]].value
-        this.updateMonths()
-        this.month = this.months[this.selectedIndex[1]].value
-        this.updateDays()
-        this.day = this.days[this.selectedIndex[2]].value
-        this.tempIndex = this.selectedIndex
+        this.$refs.cascadePicker.show()
       },
       hide() {
-        this.$refs.picker.hide()
-      },
-      change(i, newIndex) {
-        if (newIndex !== this.tempIndex[i]) {
-          this.tempIndex[i] = newIndex
-        }
-        const keyMap = ['year', 'month', 'day']
-        if (this.dateData[i][newIndex] !== this[keyMap[i]]) {
-          this[keyMap[i]] = this.dateData[i][newIndex].value
-        }
+        this.$refs.cascadePicker.hide()
       },
       select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
       },
       cancel() {
         this.$emit(EVENT_CANCEL)
-      },
-      updateMonths() {
-        let minMonth = this.year === this.min[0] ? this.min[1] : 1
-        let maxMonth = this.year === this.max[0] ? this.max[1] : 12
-
-        this.months = range(minMonth, maxMonth, false, '月')
-
-        /* Try to keep the same month */
-        const findIndex = this.months.findIndex((item) => {
-          return item.value === this.month
-        })
-        if (findIndex !== -1) {
-          this.tempIndex.splice(1, 1, findIndex)
-          this.updateDays()
-        } else {
-          if (this.month < this.months[0].value) {
-            this.month = this.months[0].value
-            this.tempIndex[1] = 0
-          } else {
-            this.month = this.months[this.months.length - 1].value
-            this.tempIndex[1] = this.months.length - 1
-          }
-        }
-      },
-      updateDays() {
-        let day = 30
-        if ([1, 3, 5, 7, 8, 10, 12].includes(this.month)) {
-          day = 31
-        } else {
-          if (this.month === 2) {
-            day = !(this.year % 400) || (!(this.year % 4) && this.year % 100) ? 29 : 28
-          }
-        }
-
-        let minDay = this.year === this.min[0] && this.month === this.min[1] ? this.min[2] : 1
-        let maxDay = this.year === this.max[0] && this.month === this.max[1] ? this.max[2] : day
-
-        this.days = range(minDay, maxDay, false, '日')
-
-        /* Try to keep the same day */
-        const self = this
-        const findIndex = this.days.findIndex((item) => {
-          return item.value === self.day
-        })
-        if (findIndex !== -1) {
-          this.tempIndex[2] = findIndex
-        } else {
-          if (this.day < this.days[0].value) {
-            this.day = this.days[0].value
-            this.tempIndex[2] = 0
-          } else {
-            this.day = this.days[this.days.length - 1].value
-            this.tempIndex[2] = this.days.length - 1
-          }
-        }
-
-        this.dateData = [this.years, this.months, this.days]
-        // make sure picker render before call refillColumn
-        this.$nextTick(() => {
-          this.$refs.picker.refresh()
-          this.$refs.picker.scrollTo(1, this.tempIndex[1])
-          this.$refs.picker.scrollTo(2, this.tempIndex[2])
-        })
       }
     }
   }
diff --git a/example/data/cascade.js b/example/data/cascade.js
new file mode 100644
index 000000000..b40350b5c
--- /dev/null
+++ b/example/data/cascade.js
@@ -0,0 +1,210 @@
+export const cascadeData = [
+  {
+    value: 'Fruit',
+    text: 'Fruit',
+    children: [
+      {
+        value: 'Apple',
+        text: 'Apple',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          }
+        ]
+      },
+      {
+        value: 'Orange',
+        text: 'Orange',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          },
+          {
+            value: 4,
+            text: 'Four'
+          }
+        ]
+      },
+      {
+        value: 'Lemon',
+        text: 'Lemon',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          },
+          {
+            value: 4,
+            text: 'Four'
+          },
+          {
+            value: 5,
+            text: 'Five'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'Drink',
+    text: 'Drink',
+    children: [
+      {
+        value: 'Coffee',
+        text: 'Coffee',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          }
+        ]
+      },
+      {
+        value: 'Tea',
+        text: 'Tea',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          },
+          {
+            value: 4,
+            text: 'Four'
+          }
+        ]
+      },
+      {
+        value: 'Juice',
+        text: 'Juice',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'Dessert',
+    text: 'Dessert',
+    children: [
+      {
+        value: 'Chocolate',
+        text: 'Chocolate',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          },
+          {
+            value: 4,
+            text: 'Four'
+          },
+          {
+            value: 5,
+            text: 'Five'
+          }
+        ]
+      },
+      {
+        value: 'cheese',
+        text: 'cheese',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          },
+          {
+            value: 4,
+            text: 'Four'
+          }
+        ]
+      },
+      {
+        value: 'cake',
+        text: 'cake',
+        children: [
+          {
+            value: 1,
+            text: 'One'
+          },
+          {
+            value: 2,
+            text: 'Two'
+          },
+          {
+            value: 3,
+            text: 'Three'
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/example/main.js b/example/main.js
index dd323393d..c6f8bc9e8 100644
--- a/example/main.js
+++ b/example/main.js
@@ -13,6 +13,7 @@ import Tip from './pages/tip.vue'
 import Popup from './pages/popup.vue'
 import Toast from './pages/toast.vue'
 import Picker from './pages/picker.vue'
+import CascadePicker from './pages/cascade-picker.vue'
 import TimePicker from './pages/time-picker.vue'
 import Dialog from './pages/dialog.vue'
 import ActionSheet from './pages/action-sheet.vue'
@@ -56,6 +57,10 @@ const routes = [
     path: '/picker',
     component: Picker
   },
+  {
+    path: '/cascade-picker',
+    component: CascadePicker
+  },
   {
     path: '/time-picker',
     component: TimePicker
diff --git a/example/pages/cascade-picker.vue b/example/pages/cascade-picker.vue
new file mode 100644
index 000000000..00eaaca59
--- /dev/null
+++ b/example/pages/cascade-picker.vue
@@ -0,0 +1,103 @@
+<template>
+  <cube-page type="picker-view" title="Cascade Picker" desc="">
+    <div slot="content">
+      <cube-button-group>
+        <cube-button @click="showCascadePicker">Cascade Picker</cube-button>
+        <cube-button @click="showCityPicker">City Picker</cube-button>
+        <cube-button @click="showDatePicker">Date Picker</cube-button>
+        <cube-button @click="showSetDataPicker">Set Data</cube-button>
+      </cube-button-group>
+    </div>
+  </cube-page>
+</template>
+
+<script>
+  import CubePage from 'example/components/cube-page.vue'
+  import CubeButtonGroup from 'example/components/cube-button-group.vue'
+  import DatePicker from 'example/components/date-picker.vue'
+  import Vue from 'vue'
+  import createAPI from '@/modules/create-api'
+  import { provinceList, cityList, areaList } from 'example/data/area'
+  import { cascadeData } from 'example/data/cascade'
+
+  createAPI(Vue, DatePicker, ['select', 'cancel'], false)
+
+  const cityData = provinceList
+  cityData.forEach(province => {
+    province.children = cityList[province.value]
+    province.children.forEach(city => {
+      city.children = areaList[city.value]
+    })
+  })
+
+  export default {
+    mounted() {
+      this.cascadePicker = this.$createCascadePicker({
+        title: 'Cascade Picker',
+        data: cascadeData,
+        selectedIndex: [1, 0, 0],
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle,
+        onChange: () => {
+          console.log('change')
+        }
+      })
+
+      this.cityPicker = this.$createCascadePicker({
+        title: 'City Picker',
+        data: cityData,
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.datePicker = this.$createDatePicker({
+        min: [2008, 8, 8],
+        max: [2020, 10, 20],
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.setDataPicker = this.$createCascadePicker({
+        title: 'Set Data',
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showCascadePicker() {
+        this.cascadePicker.show()
+      },
+      showCityPicker() {
+        this.cityPicker.show()
+      },
+      showDatePicker() {
+        this.datePicker.show()
+      },
+      showSetDataPicker() {
+        this.setDataPicker.setData(cascadeData)
+        this.setDataPicker.show()
+        setTimeout(() => {
+          this.setDataPicker.setData(cityData, [1, 1, 0])
+        }, 1000)
+      },
+      selectHandle(selectedVal, selectedIndex, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    },
+    components: {
+      CubePage,
+      CubeButtonGroup
+    }
+  }
+</script>
diff --git a/example/pages/picker.vue b/example/pages/picker.vue
index 993fc229e..43dd42124 100644
--- a/example/pages/picker.vue
+++ b/example/pages/picker.vue
@@ -4,9 +4,7 @@
       <cube-button-group>
         <cube-button @click="showPicker">Picker</cube-button>
         <cube-button @click="showPickerMuti">Multi-column Picker</cube-button>
-        <cube-button @click="showPickerLinkage">Linkage Picker</cube-button>
         <cube-button @click="showPickerSetData">Use SetData</cube-button>
-        <cube-button @click="showDatePicker">Date Picker</cube-button>
         <cube-button @click="showNormalTimePicker">Normal Time Picker</cube-button>
       </cube-button-group>
     </div>
@@ -16,14 +14,11 @@
 <script type="text/ecmascript-6">
   import CubePage from 'example/components/cube-page.vue'
   import CubeButtonGroup from 'example/components/cube-button-group.vue'
-  import DatePicker from 'example/components/date-picker.vue'
   import NormalTimePicker from 'example/components/normal-time-picker.vue'
-  import { provinceList, cityList, areaList } from 'example/data/area'
   import { data1, data2, data3 } from 'example/data/picker'
   import Vue from 'vue'
   import createAPI from '@/modules/create-api'
 
-  createAPI(Vue, DatePicker, ['select', 'cancel'], false)
   createAPI(Vue, NormalTimePicker, ['select', 'cancel'], false)
 
   export default {
@@ -34,69 +29,26 @@
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
+
       this.mutiPicker = this.$createPicker({
         title: 'Multi-column Picker',
         data: [data1, data2, data3],
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
-      this.linkagePicker = this.$createPicker({
-        title: 'Linkage Picker',
-        data: this.linkageData,
-        onChange: (i, newIndex) => {
-          if (newIndex !== this.tempIndex[i]) {
-            for (let j = 2; j > i; j--) {
-              this.tempIndex.splice(j, 1, 0)
-              this.linkagePicker.scrollTo(j, 0)
-            }
 
-            this.tempIndex.splice(i, 1, newIndex)
-            this.linkagePicker.setData(this.linkageData, this.tempIndex)
-          }
-        },
-        onSelect: this.selectHandle,
-        onCancel: this.cancelHandle
-      })
       this.setDataPicker = this.$createPicker({
         title: 'Use SetData',
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
 
-      this.datePicker = this.$createDatePicker({
-        min: [2008, 8, 8],
-        max: [2020, 10, 20],
-        onSelect: this.selectHandle,
-        onCancel: this.cancelHandle
-      })
-
       this.normalTimePicker = this.$createNormalTimePicker({
         selectedIndex: [10, 20, 59],
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
     },
-    data() {
-      return {
-        tempIndex: [0, 0, 0],
-        index: 0,
-        tempIndexDay: [0, 0, 0]
-      }
-    },
-    watch: {
-      linkageData() {
-        this.linkagePicker.refresh()
-      }
-    },
-    computed: {
-      linkageData() {
-        const provinces = provinceList
-        const cities = cityList[provinces[this.tempIndex[0]].value]
-        const areas = areaList[cities[this.tempIndex[1]].value]
-
-        return [provinces, cities, areas]
-      }
-    },
     methods: {
       showPicker() {
         this.picker.show()
@@ -104,16 +56,10 @@
       showPickerMuti() {
         this.mutiPicker.show()
       },
-      showPickerLinkage() {
-        this.linkagePicker.show()
-      },
       showPickerSetData() {
         this.setDataPicker.setData([data1, data2, data3], [1, 2, 3])
         this.setDataPicker.show()
       },
-      showDatePicker() {
-        this.datePicker.show()
-      },
       showNormalTimePicker() {
         this.normalTimePicker.show()
       },
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
new file mode 100644
index 000000000..395d8cbfa
--- /dev/null
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -0,0 +1,107 @@
+<template>
+  <cube-picker
+      ref="picker"
+      :title="title"
+      :data="pickerData"
+      :selected-index="pickerSelectedIndex"
+      @select="_pickerSelect"
+      @cancel="_pickerCancel"
+      @change="_pickerChange"></cube-picker>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePicker from '../picker/picker.vue'
+  import apiMixin from '../../common/mixins/api'
+
+  const COMPONENT_NAME = 'cube-cascade-picker'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CHANGE = 'change'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [apiMixin],
+    props: {
+      title: {
+        type: String,
+        default: 'Cascade Picker'
+      },
+      data: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      selectedIndex: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    data () {
+      return {
+        cascadeData: this.data.slice(),
+        pickerSelectedIndex: this.selectedIndex.slice(),
+        pickerData: []
+      }
+    },
+    created() {
+      this.updatePickerData()
+    },
+    methods: {
+      show() {
+        this.$refs.picker.show()
+      },
+      hide() {
+        this.$refs.picker.hide()
+      },
+      setData(data, selectedIndex = []) {
+        this.cascadeData = data
+        this.pickerSelectedIndex = selectedIndex
+        this.updatePickerData()
+      },
+      _pickerSelect(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
+      },
+      _pickerCancel() {
+        this.$emit(EVENT_CANCEL)
+      },
+      _pickerChange(i, newIndex) {
+        if (newIndex !== this.pickerSelectedIndex[i]) {
+          this.pickerSelectedIndex.splice(i, 1, newIndex)
+          this.updatePickerData(i + 1)
+        }
+        this.$emit(EVENT_CHANGE, i, newIndex)
+      },
+      updatePickerData(fromColumn = 0) {
+        let data = this.cascadeData
+        let i = 0
+        while (Array.isArray(data) && data.length) {
+          if (i >= fromColumn) {
+            let columnData = []
+            data.forEach((item) => {
+              columnData.push({
+                value: item.value,
+                text: item.text
+              })
+            })
+            this.pickerData[i] = columnData
+            /* refillColumn could only be called after show() */
+            this.pickerSelectedIndex[i] = fromColumn === 0
+              ? (this.pickerSelectedIndex[i] < data.length ? this.pickerSelectedIndex[i] || 0 : 0)
+              : this.$refs.picker.refillColumn(i, columnData)
+          }
+          data = data[this.pickerSelectedIndex[i]].children
+
+          i++
+        }
+
+        this.pickerData = this.pickerData.slice()
+      }
+    },
+    components: {
+      CubePicker
+    }
+  }
+</script>
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 1b393e248..9ac20c6ca 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -158,7 +158,16 @@
       setData(data, selectedIndex) {
         this.pickerSelectedIndex = selectedIndex ? [...selectedIndex] : []
         this.pickerData = data.slice()
-        this.dirty = true
+        if (this.isVisible) {
+          this.$nextTick(() => {
+            this.wheels.forEach((wheel, i) => {
+              wheel.refresh()
+              wheel.wheelTo(this.pickerSelectedIndex[i])
+            })
+          })
+        } else {
+          this.dirty = true
+        }
       },
       refill(datas) {
         let ret = []
diff --git a/src/index.js b/src/index.js
index c2c556666..0e354fada 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import {
   Scroll,
   Popup,
   TimePicker,
+  CascadePicker,
   Dialog,
   Tip,
   Toast,
@@ -23,6 +24,7 @@ function install(Vue) {
     Style,
     Button,
     TimePicker,
+    CascadePicker,
     Dialog,
     Tip,
     Toast,
diff --git a/src/module.js b/src/module.js
index 507158380..6df0ae4c5 100644
--- a/src/module.js
+++ b/src/module.js
@@ -11,6 +11,7 @@ import ActionSheet from './modules/action-sheet'
 import Slide from './modules/slide'
 import IndexList from './modules/index-list'
 import TimePicker from './modules/time-picker'
+import CascadePicker from './modules/cascade-picker'
 import Scroll from './modules/scroll'
 
 import BScroll from './modules/better-scroll'
@@ -28,6 +29,7 @@ export {
   Popup,
   Picker,
   TimePicker,
+  CascadePicker,
   Dialog,
   Tip,
   Toast,
diff --git a/src/modules/cascade-picker/api.js b/src/modules/cascade-picker/api.js
new file mode 100644
index 000000000..6b1f83e07
--- /dev/null
+++ b/src/modules/cascade-picker/api.js
@@ -0,0 +1,11 @@
+import createAPI from '../../common/helpers/create-api'
+import { warn } from '../../common/helpers/debug'
+
+export default function addCascadePicker (Vue, CascadePicker) {
+  const cascadePickerAPI = createAPI(Vue, CascadePicker, ['select', 'cancel', 'change'])
+  cascadePickerAPI.before((data, renderFn, single) => {
+    if (single) {
+      warn('CascadePicker component can not be a singleton.')
+    }
+  })
+}
diff --git a/src/modules/cascade-picker/index.js b/src/modules/cascade-picker/index.js
new file mode 100644
index 000000000..73c401102
--- /dev/null
+++ b/src/modules/cascade-picker/index.js
@@ -0,0 +1,15 @@
+import Picker from '../../components/picker/picker.vue'
+import CascadePicker from '../../components/cascade-picker/cascade-picker.vue'
+import addCascadePicker from './api'
+import addPicker from '../picker/api'
+
+CascadePicker.install = function (Vue) {
+  Vue.component(Picker.name, Picker)
+  Vue.component(CascadePicker.name, CascadePicker)
+  addPicker(Vue, Picker)
+  addCascadePicker(Vue, CascadePicker)
+}
+
+CascadePicker.Picker = Picker
+
+export default CascadePicker
diff --git a/test/unit/specs/cascade-picker.spec.js b/test/unit/specs/cascade-picker.spec.js
new file mode 100644
index 000000000..b7221749a
--- /dev/null
+++ b/test/unit/specs/cascade-picker.spec.js
@@ -0,0 +1,125 @@
+import Vue from 'vue2'
+import CascadePicker from '@/modules/cascade-picker'
+import instantiateComponent from '@/common/helpers/instantiate-component'
+import { cascadeData } from 'example/data/cascade'
+import { dispatchSwipe } from '../utils/event'
+
+describe('CascadePicker', () => {
+  let vm
+
+  afterEach(() => {
+    if (vm) {
+      vm.$parent.destroy()
+      vm = null
+    }
+  })
+
+  it('use', () => {
+    Vue.use(CascadePicker)
+    expect(Vue.component(CascadePicker.name))
+      .to.be.a('function')
+  })
+
+  it('should render correct contents', function () {
+    vm = createCascadePicker({
+      data: cascadeData,
+      selectedIndex: [1, 1, 3]
+    })
+
+    const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+    expect(wheels.length)
+      .to.equal(3)
+
+    const firstWheelItems = wheels[0].querySelectorAll('li')
+    expect(firstWheelItems.length)
+      .to.equal(3)
+    expect(firstWheelItems[1].textContent.trim())
+      .to.equal('Drink')
+
+    const secondWheelItems = wheels[1].querySelectorAll('li')
+    expect(secondWheelItems.length)
+      .to.equal(3)
+    expect(secondWheelItems[1].textContent.trim())
+      .to.equal('Tea')
+
+    const thirdWheelItems = wheels[2].querySelectorAll('li')
+    expect(thirdWheelItems.length)
+      .to.equal(4)
+    expect(thirdWheelItems[3].textContent.trim())
+      .to.equal('Four')
+  })
+
+  it('should trigger events', function (done) {
+    this.timeout(10000)
+
+    const selectHandle = sinon.spy()
+    const cancelHandle = sinon.spy()
+    const changeHandle = sinon.spy()
+    const events = {
+      select: selectHandle,
+      cancel: cancelHandle,
+      change: changeHandle
+    }
+
+    vm = createCascadePicker({
+      data: cascadeData
+    }, events)
+
+    vm.show()
+    setTimeout(() => {
+      const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+      const firstWheelItems = wheels[0].querySelectorAll('li')
+
+      dispatchSwipe(firstWheelItems[1], [
+        {
+          pageX: firstWheelItems[1].offsetLeft + 10,
+          pageY: firstWheelItems[1].offsetTop + 10
+        },
+        {
+          pageX: 300,
+          pageY: 380
+        }
+      ], 100)
+
+      setTimeout(() => {
+        expect(changeHandle)
+          .to.be.callCount(1)
+
+        const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+        confirmBtn.click()
+        expect(selectHandle)
+          .to.be.callCount(1)
+
+        vm.show()
+        setTimeout(() => {
+          const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+          cancelBtn.click()
+          expect(cancelHandle)
+            .to.be.callCount(1)
+          done()
+        }, 100)
+      }, 1000)
+    }, 150)
+  })
+
+  it('setData', function () {
+    this.timeout(10000)
+
+    vm = createCascadePicker()
+
+    vm.setData(cascadeData, [1, 1, 1])
+
+    /* expect vm.pickerData[2] equal to cascadeData[1].children[1].children */
+    expect(vm.pickerData[2].length)
+      .to.equal(cascadeData[1].children[1].children.length)
+    expect(vm.pickerData[2][0].value)
+      .to.equal(cascadeData[1].children[1].children[0].value)
+  })
+
+  function createCascadePicker(props = {}, events = {}) {
+    return instantiateComponent(Vue, CascadePicker, {
+      props: props,
+      on: events
+    })
+  }
+})
diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index f2a975917..17432c0a6 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -156,7 +156,7 @@ describe('Picker', () => {
     }, 150)
   })
 
-  it('should add warn log when sigle is false', () => {
+  it('should add warn log when single is true', () => {
     const app = new Vue()
     const originWarn = console.warn
     const msgs = []
@@ -173,6 +173,36 @@ describe('Picker', () => {
     console.warn = originWarn
   })
 
+  it('setData when picker is invisible', function (done) {
+    this.timeout(10000)
+    vm = createPicker()
+    vm.setData([data1], [1])
+    vm.show()
+    setTimeout(() => {
+      vm.confirm()
+      expect(vm.pickerSelectedIndex[0]).to.equal(1)
+      expect(vm.pickerSelectedVal[0]).to.equal(data1[1].value)
+      done()
+    }, 150)
+  })
+
+  it('setData when picker is visible', function (done) {
+    this.timeout(10000)
+    vm = createPicker({
+      data: [data1]
+    })
+    vm.show()
+    setTimeout(() => {
+      vm.setData([data2], [2])
+      setTimeout(() => {
+        vm.confirm()
+        expect(vm.pickerSelectedIndex[0]).to.equal(2)
+        expect(vm.pickerSelectedVal[0]).to.equal(data2[2].value)
+        done()
+      }, 150)
+    }, 150)
+  })
+
   function createPicker(props = {}, events = {}) {
     return instantiateComponent(Vue, Picker, {
       props: props,