```html
<div class="demo-block" id="picker-demo1">
  <lx-group-title>默认，不设置默认值时选中第一个 {{ year1 }}</lx-group-title>
  <lx-picker
    v-model="year1"
    :data="years"
    @on-change="change"
  ></lx-picker>
  <br>
  <lx-group-title>异步加载及动态改变数据</lx-group-title>
  <lx-picker
    v-model="year001"
    :data="years001"
    @on-change="change"
  ></lx-picker>
  <br>
  <lx-group>
    <lx-cell
      title="current value"
      :value="JSON.stringify(year001)"
    ></lx-cell>
  </lx-group>
  <lx-x-button
    type="primary"
    @click.native="changeValue([['1','3','5','7','9','11'],['2','3','4','5'],['a','b','c']])"
  >
    Set Data1
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="changeValue([['1','3','5','7','9','11'],['2','3','4','5']])"
  >
    Set Data1
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="changeValue([['2','4','6','8','10','11']])"
  >
    Set Data2
  </lx-x-button>
  <br>
  <lx-group-title>设置默认值时</lx-group-title>
  <lx-picker
    v-model="year2"
    :data="years"
    @on-change="change"
  ></lx-picker>
  <br>
  <lx-group-title>双向绑定</lx-group-title>
  <lx-picker
    v-model="year3"
    :data="years"
    @on-change="change3"
  ></lx-picker>
  <select v-model="year5">
    <option
      v-for="one in years[0]"
      :key="one.value"
      :value="one.value"
    >
      {{ one.name }}
    </option>
  </select>
  <br>
  <lx-group-title>非联动多列</lx-group-title>
  <lx-picker
    v-model="year4"
    :data="years1"
    @on-change="change"
  ></lx-picker>
  <br>
  <lx-group-title>五列</lx-group-title>
  <lx-picker
    v-model="year6Value"
    :data="year6"
    @on-change="change"
  ></lx-picker>
  <br>
  <lx-group-title>地区联动: 当前值{{ year7Value }}</lx-group-title>
  <lx-picker
    v-model="year7Value"
    :data="year7"
    :columns="3"
    @on-change="change"
  ></lx-picker>
  <lx-x-button
    type="primary"
    @click.native="setData1"
  >
    set Value to ["USA", "usa002", "0005"]
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="setData2"
  >
    set Value to ["china", "china002", "gz"]
  </lx-x-button>
  <lx-x-button
    type="primary"
    @click.native="setList"
  >
    set List
  </lx-x-button>
  <br>
  <lx-group-title>3列的数据，只显示两列</lx-group-title>
  <lx-picker
    v-model="year8Value"
    :data="year7"
    :fixed-columns="2"
    :columns="3"
    @on-change="change"
  ></lx-picker>
</div>


<script>
// Picker.md
let years = []
for (var i = 2000; i <= 2030; i++) {
  years.push({
    name: i + '年',
    value: i + ''
  })
}
new Vue({
  el: '#picker-demo1',
  data: {
    years: [years],
    years001: [],
    year001: [],
    years1: [years, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
    year1: [''],
    year2: ['2002'],
    year3: ['2005'],
    year4: ['2002', '4'],
    year5: '2005',
    year6: [
      ['你', '我', '他'],
      ['you', 'I', 'him'],
      ['ni', 'wo', 'ta'],
      [1, 2, 3, 4, 5],
      [5, 4, 3, 2, 1]
    ],
    year6Value: ['我', 'him', 'ni', '1', '2'],
    year7: [{
      name: '中国',
      value: 'china',
      parent: 0
    }, {
      name: '美国',
      value: 'USA',
      parent: 0
    }, {
      name: '广东',
      value: 'china001',
      parent: 'china'
    }, {
      name: '广西',
      value: 'china002',
      parent: 'china'
    }, {
      name: '美国001',
      value: 'usa001',
      parent: 'USA'
    }, {
      name: '美国002',
      value: 'usa002',
      parent: 'USA'
    }, {
      name: '广州',
      value: 'gz',
      parent: 'china001'
    }, {
      name: '深圳',
      value: 'sz',
      parent: 'china001'
    }, {
      name: '广西001',
      value: 'gz',
      parent: 'china002'
    }, {
      name: '广西002',
      value: 'sz',
      parent: 'china002'
    }, {
      name: '美国001_001',
      value: '0003',
      parent: 'usa001'
    }, {
      name: '美国001_002',
      value: '0004',
      parent: 'usa001'
    }, {
      name: '美国002_001',
      value: '0005',
      parent: 'usa002'
    }, {
      name: '美国002_002',
      value: '0006',
      parent: 'usa002'
    }],
    year7Value: [],
    year8Value: []
  },
  watch: {
    year5: {
      handler (val) {
        this.year3[0] = val
        // this.year3.$set(0, val)
        this.$set(this.year3, 0, val)
      },
      deep: true
    },
    change3 (value) {
      this.year5 = value[0]
    }
  },
  methods: {
    changeValue (value) {
      this.years001 = value
    },
    change (value) {
      console.log('new Value', value)
    },
    change3 (value) {
      this.year5 = value[0]
    },
    setData1 () {
      this.year7Value = ['USA', 'usa002', '0005']
    },
    setData2 () {
      this.year7Value = ['china', 'china002', 'gz']
    },
    setList () {
      this.year7.push({
        name: '美国002_003',
        value: '0007',
        parent: 'usa002'
      })
    }
  }
})
</script>
```