vant picker+popup 自定義三級聯動案例

阿新 • • 發佈：2020-11-05

picker選擇器的資料由columns屬性控制，columns中有幾個元素就代表該選擇器有多少級，通過change方法來給對應列賦值。

columns = [{
    values: column1,// 對應列的值
    defaultIndex: 0,// 預設選中項索引
    className: 'class1' // 對應列的類名 
  },{
    values: [],defaultIndex: 0,className: 'class2'
  },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': '小明'
        },'text': '小紅'
        },'text': '小剛'
        }],'text': 'Amy'
        },'text': 'Sam'
        }],'3': [{
          'kid': 4,'text': 'Sion'
        },'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
        },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屬性接收的是一個數組，如官方例子中：

vant picker+popup 自定義三級聯動案例