mt-cell搭配mt-popup和mt-picker的结合使用（基于mint-ui）

html代码片段：

      <mt-cell
         style="border:1px dotted red;border-radius:5px;width:80vw;margin-left:12vw"
          title="企业"
          is-link
          :value="qiyeVal"
          @click.native="qiyeVisible=true"
        ></mt-cell>
        <div v-if="qiyeVisible">
          <mt-popup v-model="qiyeVisible" position="bottom">
            <mt-button class="btn" type="primary" size="small" @click="qiyeSelectOk">确定</mt-button>
            <mt-picker class="picker" ref="refQIYE"
                value-key="name" :slots="qiyeslots" @change="qiyeChange"></mt-picker>
          </mt-popup>
        </div>

css样式（仅供参考，如有不对，自己调整样式即可）：

// picker的样式
.picker {
  width: 100vw;
  line-height: 17vh;
  margin-top: -5vh;
  margin-bottom: 10px;
}
//按钮的样式
.btn {
  margin-left: 80vw;
  margin-top: 1vh;
  margin-bottom: -9vh;
  z-index: 2001;
}

data代码片段：

      qiyeVisible: false,
      qiyeVal: '',
      qiyeslots: [
        {
          flex: 1,
          values: []
        }
      ],

methods代码片段:

	qiyeChange (picker, values) {
      this.qyVisible = true
    },
    qiyeSelectOk () {
      this.qiyeVisible = false
      this.qiyeVal = this.$refs.refQIYE.getValues()[0].name
      this.qiye = this.$refs.refQIYE.getValues()[0].id
    },

获取的数据的代码片段：

//该获取数据的方法放置在需要获取该数据的位置
getData(){
      this.qiyeslots[0].values[0] = '数据加载中，请稍后...'
      // 从后台获取数据
      this.$http.get('/地址').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data.length === 0) {
          return this.$message.warning('抱歉！目前没有合作企业')
        }
        this.qiyeslots[0].values = res.data
      }).catch(() => {})
	//	模拟数据
     this.qiyeslots[0].values = [
	     { id: '0', name: '陕西陕煤蒲白矿业有限公司' },
	     { id: '1', name: '凉水井煤矿' }
     ]
}