百度了好多都没有自己想要的, 自己捣鼓了老久, 效果达到自己的预想, 代码不是很优雅.
- <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>
来源: http://www.bubuko.com/infodetail-3217249.html