vant picker+popup 사용자 정의 3 급 연동 사례

picker 선택 기의 데 이 터 는 columns 속성 에 의 해 제 어 됩 니 다.columns 에 몇 가지 요소 가 있 으 면 이 선택 기 가 몇 단계 인지,change 방법 을 통 해 해당 열 에 값 을 부여 합 니 다.

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

demo

<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 도 설정 하지 않 아 도 됩 니 다.구성 요 소 는 colums:[{text:'장 3',age:18},{text:'이사',age:28}과 같은 키 를 기본적으로 가 져 옵 니 다.]
이상 의 이 vant picker+popup 사용자 정의 3 급 연동 사례 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.