快捷導(dǎo)航

vant中的picker選擇器自定義選項內(nèi)容

更新時間：2022年12月05日 10:19:55 作者：sunddy_x

這篇文章主要介紹了vant中的picker選擇器自定義選項內(nèi)容，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant picker選擇器自定義選項內(nèi)容

項目中遇到需要在選擇器中展示多行數(shù)據(jù)，這里需要用到picker的自定義選項內(nèi)容。

代碼

<template>
  <div class="app-container">
    <van-nav-bar :title="navTitle" />
    <section>
      <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="選擇器"
          placeholder="點擊選擇"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            value-key="name"
            item-height="56px"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          >
            <template #option="option">
              <div style="display: flex; flex-direction: column; align-items: center;">
                <div>姓名：{{ option.name }}</div>
                <div>年齡：{{ option.age }}</div>
              </div>
            </template>
          </van-picker>
        </van-popup>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Form',
  data() {
    return {
      navTitle: '表單',
      value: '',
      columns: [{
        name: '張三',
        age: 18
      }, {
        name: '李四',
        age: 19
      }],
      showPicker: false
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    },
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
  section {
    padding: 20px;
  }
</style>

效果圖

vant 使用picker二級級聯(lián)

其實邏輯比較簡單（話不多說上代碼）

<van-field
          readonly
          clickable
          name="bankId"
          label="機構(gòu)名稱"
          :value="bankIdValue"
          placeholder="選擇機構(gòu)"
          @click="bankIdShowPicker = true"
        />
        <van-popup v-model="bankIdShowPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="bankId_columns"
            @cancel="bankIdShowPicker = false"
            @confirm="bankIdShowPickerOnConfirm"
          />
        </van-popup>

export default {
  data() {
  bankIdShowPicker: false,
      bankId_columns: [
        {
          text: "",
          id: "",
          children: [
            {
              text: "",
              id: "",
            },
            {
              text: "",
              id: "",
            },
          ],
        },
      ],
      bankIdMap: {},
  }
  
  mounted() {
    console.log("mounted.........");
    this.getBranchList();
  },
  methods: {
  getBranchList() {
  //此處調(diào)用的接口
      this.$get("/user/findBranchId")
        .then((res) => {
          console.log("res.data", res.data);
          if (res.data.resultCode == "0") {
            this.bankId_columns[0].text = res.data.data.branchName;
            var childrenBankList = res.data.data.childBranchList;
            let map = new Map();
            this.bankId_columns[0].children = [];
            for (let i = 0; i < childrenBankList.length; i++) {
              let childrenBanObject = {
                text: "",
                id: "",
              };
              childrenBanObject.text = childrenBankList[i].branchName;
              childrenBanObject.id = childrenBankList[i].id;
              this.bankId_columns[0].children.push(childrenBanObject);//插入數(shù)據(jù)
              map.set(childrenBankList[i].branchName, childrenBankList[i].id);
            }
            this.bankIdMap = map;
          } else {
            Toast(res.data.resultDesc);
          }
        })
        .catch((err) => {
          Toast("出了點小問題");
          throw err;
        });
    },
    //選擇器確認(rèn)按鈕
    bankIdShowPickerOnConfirm(value) {
      console.log("value", value);
      console.log("children", this.bankId_columns[0].children);
      this.bankIdValue = value[1];
      this.childrenBankIdValue = this.bankIdMap.get(value[1]);
      console.log("childrenBankIdValue", this.childrenBankIdValue);
      this.bankIdShowPicker = false;
    },
  }

這是后臺返回數(shù)據(jù)