1、頁(yè)面中使用form表單，引入select組件

當(dāng)data中默認(rèn)沒(méi)有定義form.region的值時(shí)，會(huì)出現(xiàn)選擇select后input沒(méi)有回顯選擇數(shù)據(jù)值；所以使用select時(shí)，必須定義默認(rèn)值

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動(dòng)名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

2、嵌套層次過(guò)多，select選中值頁(yè)面不回顯的解決方法，動(dòng)態(tài)表單props的綁定

強(qiáng)制重新加載頁(yè)面@visible-change=“$forceUpdate()”

<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
<el-form-item label="備注" prop="remark">
  <el-input v-model="form.remark" placeholder="請(qǐng)輸入備注"/>
</el-form-item>
<el-row v-for="(item,index) in form.details" :key="index">
	<el-col :span="12">
		<el-form-item label="活動(dòng)區(qū)域" :prop="'details['+index+']region'" label-width="75px">
			<el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域" @visible-change="$forceUpdate()">
			  <el-option label="區(qū)域一" value="shanghai"></el-option>
			  <el-option label="區(qū)域二" value="beijing"></el-option>
			</el-select>
		</el-form-item>
	</el-col>
	<el-col :span="12">
		<el-form-item label="是否啟用" :prop="'details['+index+']status'" label-width="75px">
			<el-switch v-model="item.status" active-value="Y" inactive-value="N" @change="$forceUpdate()"></el-switch>
		</el-form-item>
	</el-col>
</el-row>
</el-form>

//也可在方法中使用
methods:{
	update(){
		this.$forceUpdate();//強(qiáng)制刷新視圖
	}
}

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-520810.html

到了這里，關(guān)于element框架select值更新頁(yè)面不回顯的問(wèn)題，動(dòng)態(tài)表單props綁定問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！