vue基于vant框架一个页面多次使用picker选择器

Posted 2020-11-16 该死的名字

百度了好多都没有自己想要的，自己捣鼓了老久，效果达到自己的预想，代码不是很优雅。

<template>
  <div class="record-con">
    <div class="title clear">
      <i class="iconfont icon-icon_arrow_left" />
      <span>个人中心</span>
    </div>

    <div class="mform">
      <h1>人数统计</h1>
      
      
      <form style="border:1px solid red;">
        <div class="team">
          <van-field
            readonly
            clickable
            label="城市"
            :value="value1"
            placeholder="选择城市"
            @click="mqinAi1"
          />
          <div v-if="myIf1">
            <van-popup
              v-model="showPicker"
              position="bottom"
            >
              <van-picker
                title="请选择城市"
                show-toolbar
                :columns="columns1"
                @cancel="showPicker = false"
                @confirm="onConfirm1"
              />
            </van-popup>
          </div>
        </div>

        <div class="group-leader flexbox">
          <van-field
            readonly
            clickable
            label="组长"
            :value="value2"
            placeholder="选择组长"
            @click="mqinAi2"
          />
          <div v-if="myIf2">
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                title="请选择组长"
                show-toolbar
                :columns="columns2"
                @cancel="showPicker = false"
                @confirm="onConfirm2"
              />
            </van-popup>
          </div>
        </div>

        <div class="num flexbox">
          <van-field
            readonly
            clickable
            label="组总人数:"
            :value="value3"
            placeholder="选择组长"
            @click="mqinAi3"
          />
          <div v-if="myIf3">
            <van-popup v-model="showPicker" position="bottom">
              <van-picker

                title="请选择组长"
                show-toolbar
                :columns="columns3"
                @cancel="showPicker = false"
                @confirm="onConfirm3"
              />
            </van-popup>
          </div>
        </div>

        <div class="num-real flexbox">
          <van-field
            readonly
            clickable
            label="实到人数:"
            :value="value4"
            placeholder="选择组长"
            @click="mqinAi4"
          />
          <div v-if="myIf4">
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                title="请选择组长"
                show-toolbar
                :columns="columns4"
                @cancel="showPicker = false"
                @confirm="onConfirm4"
              />
            </van-popup>
          </div>
        </div>

        <div class="real-name flexbox">
          <van-field
            readonly
            clickable
            label="实到人员名单:"
            :value="value5"
            placeholder="选择组长"
            @click="mqinAi5"
          />
          <div v-if="myIf5">
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                title="请选择组长"
                show-toolbar
                :columns="columns5"
                @cancel="showPicker=false"
                @confirm="onConfirm5"
              />
            </van-popup>
          </div>
        </div>
      </form>

    </div>
  </div>
</template>

<script>
import Vue from ‘vue‘;
import { Picker } from ‘vant‘;
import { Popup } from ‘vant‘;
Vue.use(Popup);
Vue.use(Picker);
export default {
  name: ‘‘,
  components: {},
  props: {},
  data() {
    return {
      myIf1: false,
      myIf2: false,
      myIf3: false,
      myIf4: false,
      myIf5: false,
      value1: ‘‘,
      value2: ‘‘,
      value3: ‘‘,
      value4: ‘‘,
      value5: ‘‘,

      showPicker: false,

      columns1: [‘杭州‘, ‘宁波‘, ‘温州‘, ‘嘉兴‘, ‘湖州‘],
      columns2: [‘组长1‘, ‘组长1‘, ‘组长1‘, ‘组长1‘, ‘组长1‘],
      columns3: [‘组长2‘, ‘组长2‘],
      columns4: [‘组长3‘, ‘组长3‘],
      columns5: [‘组长5‘, ‘组长5‘]
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onConfirm1(e) {
      this.value1 = e
      this.showPicker = false
    },
    onConfirm2(e) {
      this.value2 = e
      this.showPicker = false
    },
    onConfirm3(e) {
      this.value3 = e
      this.showPicker = false
    },
    onConfirm4(e) {
      this.value4 = e
      this.showPicker = false
    },
    onConfirm5(e) {
      this.value5 = e
      this.showPicker = false
    },
    mqinAi1() {
      this.myIf1 = true
      this.myIf2 = false
      this.myIf3 = false
      this.myIf4 = false
      this.myIf5 = false
      this.showPicker = true
    },
    mqinAi2() {
      this.myIf1 = false
      this.myIf2 = true
      this.myIf3 = false
      this.myIf4 = false
      this.myIf5 = false
      this.showPicker = true
    },
    mqinAi3() {
      this.myIf1 = false
      this.myIf2 = false
      this.myIf3 = true
      this.myIf4 = false
      this.myIf5 = false
      this.showPicker = true
    },
    mqinAi4() {
      this.myIf1 = false
      this.myIf2 = false
      this.myIf3 = false
      this.myIf4 = true
      this.myIf5 = false

      this.showPicker = true
    },
    
    mqinAi5() {
      this.myIf1 = false
      this.myIf2 = false
      this.myIf3 = false
      this.myIf4 = false
      this.myIf5 = true
      this.showPicker = true
    }
  }
}
</script>