vant中picker组件的使用demo,实现机构的选择

近期有一个需求,考生报名的时候,需要选择自己的挂靠机构,方便上级机构审核。

在此记录一下,方便其他有需求的朋友参考一下。如有不足之处,欢迎指正。

第一步引入插件:npm install van --save

第二步:全局注册,在main.js中引入以下代码   

import Vant from 'vant'
Vue.use(Vant)

第三步:界面代码

<template>
  <div class="test-form" id="app">
    <van-popup v-model="zGBMPicker" position="bottom"  style="height: 60%" >
      <van-field v-model="zGBMKeyword" placeholder="请输入挂靠机构名称" @input="fatchDepartment"/>
      <van-picker
        show-toolbar
        item-height="24"
        visible-item-count="5"
        :columns="departmentList"
        @confirm="zGBMConfirm"
        @cancel="zGBMPicker = false" />
    </van-popup>
    <div class="search-card el-form-item is-required el-form-item--medium">
      <van-field style="margin-left: 2%;" class="el-form-item__label " label="挂靠机构"
                 readonly v-model="params.zGBMShow" placeholder="请选择挂靠机构"  @click.native="showZGBM" />
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import $ from 'jquery'

export default {
  components: {
    Parser,
    axios
  },
  props: {},
  data() {
    return {
      zGBMPicker: false,
      showParams: {
        zGBM: null,
        zGBMShow: null
      },
      params: {
        zGBM: null,
        zGBMShow: null
      },
      zGBMKeyword: null,
      value: [],
    
      key2: +new Date(),

    }
  },
  computed: {

  },
  watch: {
    value(){
      this.$refs.cascader.dropDownVisible = false
    }
  },
  created() {

  },
  mounted() { 
    this.fatchDepartment()
  },
  methods: {
   
    zGBMConfirm: function(val) {
      this.params.zGBMShow = val.text
      this.params.zGBM = val.value
      this.zGBMPicker = false
      this.organizationId= val.value
    },
    showZGBM: function() {
      this.zGBMPicker = true
    },
   
    fatchDepartment: function(val) {
      this.departmentList = []
      var _this = this
      _this.$axios.get("XXXXXXXXX?name="+val)
        .then(function (response) {
          document.getElementById("popContainer").style.display = "none"
          if( response.data.data ) {
            response.data.data.forEach(item => {
              _this.departmentList.push(
                {
                  text: item.organizationName,
                  value: item.organizationId
                }
              )
            })
          }

        })
    },
   
    // 获取url参数
    getUrlKey(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }
}
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  padding: 15px;
}
.van-picker__columns{
  height: 300px;
}

</style>

第四步:实现效果如图。点击挂靠机构,底部弹出机构信息,输入框输入值,模糊搜索数据,选择自己所属机构

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页