1

2

3

4

<div>

<mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>

<

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<script>

import { Picker } from 'mint-ui';

import myaddress from '../../../static/address3.json'     //引入省市區資料

export default {

name: '',

components: {

'mt-picker': Picker

},

props: {},

data () {

return {

myAddressSlots: [

{

flex: 1,

defaultIndex: 1,   

values: Object.keys(myaddress),  //省份陣列

className: 'slot1',

textAlign: 'center'

}, {

divider: true,

content: '-',

className: 'slot2'

}, {

flex: 1,

values: [],

className: 'slot3',

textAlign: 'center'

},

{

divider: true,

content: '-',

className: 'slot4'

},

{

flex: 1,

values: [],

className: 'slot5',

textAlign: 'center'

}

],

myAddressProvince:'省',

myAddressCity:'市',

myAddresscounty:'區/縣',

}

},

created() {

},

methods: {

onMyAddressChange(picker, values) {

if(myaddress[values[0]]){  //這個判斷類似於v-if的效果（可以不加，但是vue會報錯，很不爽）

picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()會返回一個數組，當前省的陣列

picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 區/縣資料就是一個數組

this.myAddressProvince = values[0];

this.myAddressCity = values[1];

this.myAddresscounty = values[2];

}

},

},

mounted(){

this.$nextTick(() => { //vue裡面全部載入好了再執行的函式  （類似於setTimeout）

this.myAddressSlots[0].defaultIndex = 0   

// 這裡的值需要和 data裡面 defaultIndex 的值不一樣才能夠初始化

//因為我沒有看過原始碼（我猜測是因為資料沒有改變，不會觸發更新）