在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’，中的内容是不一样的
             })
             ......

有问题欢迎指正

来源：CSDN

作者：青椒切小块

链接：https://blog.csdn.net/ShangMY97/article/details/103952615

标签

下拉框

vue