vant picker+popupカスタム三級連動事例

picker選択器のデータはcolumns属性によって制御され、columnsのいくつかの要素はこの選択器のレベルを表し、change方法によって対応する列に値を割り当てます。

columns = [{
    values: column1, //      
    defaultIndex: 0, //        
    className: 'class1' //        
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class2'
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class3'
  }
];

デモ

<template>
<div class="form">
  <van-row type="flex" justify="center" align="center" style="padding-top:10px">
    <van-col span="5" class="text">       </van-col>
    <van-col span="19">
      <van-field v-model="student" placeholder="   " @click="stuShow = true" :readonly="true" />
    </van-col>
  </van-row>
  <!--      -->
  <van-popup v-model="stuShow" position="bottom" :style="{ height: '40%' }">
    <van-picker :columns="stuLoad" @confirm="stuConfirm" @change="stuChange" @cancel="stuShow = false" show-toolbar />
  </van-popup>
</div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      student: '',
      stuShow: false,
      stuLoad: [],
      stuColumn1: [],
      stuColumn2: [],
      stuColumn3: []
    };
  },
  created() {
    this.makeData(); //              
  },
  methods: {
    makeData() { //     ，     axios    
      let column1 = [{
        'kid': 0,
        'text': '   '
      }, {
        'kid': 1,
        'text': '   '
      }, {
        'kid': 2,
        'text': '   '
      }];
      let column2 = {
        '1': [{
          'kid': 1,
          'text': '  '
        }, {
          'kid': 2,
          'text': '  '
        }, {
          'kid': 3,
          'text': '  '
        }],
        '2': [{
          'kid': 4,
          'text': '  '
        }, {
          'kid': 5,
          'text': '  '
        }]
      }
      let column3 = {
        '1': [{
          'kid': 1,
          'text': '  '
        }, {
          'kid': 2,
          'text': '  '
        }, {
          'kid': 3,
          'text': '  '
        }],
        '2': [{
          'kid': 4,
          'text': 'Amy'
        }, {
          'kid': 5,
          'text': 'Sam'
        }],
        '3': [{
          'kid': 4,
          'text': 'Sion'
        }, {
          'kid': 5,
          'text': 'Juno'
        }],
        '4': [{
          'kid': 6,
          'text': 'Lucy'
        }, {
          'kid': 7,
          'text': 'Tom'
        }],
        '5': [{
          'kid': 6,
          'text': 'Iwan'
        }]
      }
      let columns = [];
      columns = [{
          values: column1,
          defaultIndex: 0 //       
        },
        {
          values: [],
          defaultIndex: 0
        },
        {
          values: [],
          defaultIndex: 0
        }
      ];
      this.stuColumn2 = column2;
      this.stuColumn3 = column3;
      this.stuLoad = columns;
    },
    stuConfirm(value, index) { //             
      // value      
      // index        
      if (index.indexOf(0) > -1) {
        alert('   ');
      } else {
        let content = value[0]['text'] + ' / ' + value[1]['text'] + ' / ' + value[2]['text'];
        this.student = content;
        this.stuShow = false;
      }
    },
    stuChange(picker, value, index) { //         
      // Picker   
      // value      
      // index         ,   index 0，   index 1，    
      if (index == 0) { //        
        let i = value[0]['kid'];
        let item = this.stuColumn2[i] ? this.stuColumn2[i] : [];
        if (item && item[0]['text'] != '   ') {
          item.unshift({
            'kid': 0,
            'text': '   '
          })
        }
        picker.setColumnValues(1, item); //        ，        index ，        values
      } else if (index == 1) {
        let i = value[1]['kid'];
        let item = this.stuColumn3[i] ? this.stuColumn3[i] : [];
        if (item.length != 0 && item[0]['text'] != '   ') {
          item.unshift({
            'kid': 0,
            'text': '   '
          })
        }
        picker.setColumnValues(2, item);
      }
    }
  }
};
</script>

<style scoped>
.text {
  text-align: right;
}
</style>

補足知識：vue vant-picker選択器の使用及びデータ構造の書き方
vant-pickerコンポーネントcolumns属性の受信は、公式の例では：

この配列はサブアイテムです。単純に文字ですが、通常は実際のデータサブ項目は対象です。
colums:[{name:'张三'，age:18]，{name:'李四'，age:28}]
このような配列はどう表示しますか？vant-pickerのvalue-key属性はこの問題を解決します。上の配列を使いたいなら、vant-pickerです。
ということです

また、配列中のサブ項目にキー名が「text」が含まれているなら、value-keyも設定しなくてもいいです。コンポーネントはこのキー名をデフォルトで取ってもいいです。
以上のこのvant picker+popupカスタム三级连动の実例は小编が皆さんに提供した内容の全部です。