在vue中给el-select下拉框传默认值

这里点进目录就是一个表单,要求给后台传下拉框内容的一个默认值,并且要求显示朝阳区的话,传给后台‘1’,数字而不是字符串,
1.下拉框内容是后台传过来的

<el-select v-model="dqId" id="dqId" @change="getDataList">
        <el-option v-for="item in dqList" :key="item.dqId" :label="item.name" :value="item.dqId"></el-option>
</el-select>

@change实时获取下拉框中的内容,内容改变一次,就调用一下整个页面的后台链接,注意这里不能使用@input,否则传给后台的下拉框内容会延迟一次,例如我默认进来时是‘朝阳区’,我切换到‘昌平区’,传给后台的还是朝阳区对应的dqid信息,等到我再一次选择的时候才会切换到昌平区,所以为了避免这个问题,我们用@change
2.因为要默认显示一个信息,所以我们直接在data () { return {}}中设置dqid的初始默认值,dqid: '朝阳区',让下拉框默认值为朝阳区,但是这样设置,我们传给后台的dqid就不是对应的数字了,我们用第3步的方法解决这个问题

data () { 
	return {
		dqid: '朝阳区'
	}
}

3.先介绍一下函数activated(),

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

所以我们在已进入页面的时候就调用这个下拉框内容,并先给传给后台的dqid赋对应朝阳区的数字

activated () {
       this.$http({
          url: this.$http.adornUrl('xxx下拉框内容链接'),
          method: 'get'
        }).then(({data}) => {
          console.log(JSON.stringify(data))
          if (data && data.code === 0) {
            this.dqList = data.list
          } ......
        }),
       this.$http({
         url: this.$http.adornUrl('XXX表单链接'),
         method: 'get',
         params: this.$http.adornParams({
           'dqId': '1'    //在这里我们就把dqid对应的第一个默认值传给后台了
         })
       }).then(({data}) => {
         ......
       })
  },

4.最后我们还要切换下拉框内容切换表单信息

methods: {
       getDataList () {
         this.$http({
           url: this.$http.adornUrl('XXX表单链接'),
           method: 'get',
           params: this.$http.adornParams({
             'dqId': this.dqId    
             //这里让每切换一次表单里现在有的内容就把对应的dqid传给后台,注意这里和‘3’,中的内容是不一样的
             })
             ......

有问题欢迎指正

发布了38 篇原创文章 · 获赞 1 · 访问量 5160

猜你喜欢

转载自blog.csdn.net/ShangMY97/article/details/103952615
今日推荐