vant下拉單選

參考@官網文檔

代碼：

<template>
  <div>
    <van-field readonly="" is-link @click="show = true" v-model="inputval" name="測試單選" label="測試單選" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputval: '',
        show: false,
        actions: [{
          name: '選項一'
        }, {
          name: '選項二'
        }, {
          name: '選項三'
        }],
      };
    },
    methods: {
      onSelect(item) {
        // 默認情況下點擊選項時不會自動收起
        // 可以通過 close-on-click-action 屬性開啟自動收起
        this.show = false;
        this.inputval = item.name
      },
    },
  };
</script>
<style>
</style>

效果：

 

用了以上方法，感覺弊端明顯，actions只能是單屬性數組，onSelect獲取的item也不會是對象，看到了Cascader 級聯選擇，可以不級聯使用

代碼：

<template>
  <div>
    <van-field v-model="fieldValue" is-link readonly label="地區" placeholder="請選擇所在地區" @click="show = true" />
    <van-popup v-model="show" round position="bottom">
      <van-cascader v-model="cascaderValue" title="請選擇所在地區" :options="options" @close="show = false" @finish="onFinish" />
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant'

  export default {
    data() {
      return {
        show: false,
        fieldValue: '',
        cascaderValue: '',
        // 選項列表，children 代表子選項，支持多級嵌套
        options: [{
            text: '浙江省',
            value: '330000',
           // children: [{ text: '杭州市', value: '330100' }],
          },
          {
            text: '江蘇省',
            value: '320000',
            //children: [{ text: '杭州市', value: '330100' }],
          },
        ],
      };
    },
    methods: {
      onFinish({selectedOptions}) {
        this.show = false;
        this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      },
    },
  };
</script>

<style>
</style>

效果和上圖類似，就不截圖了