HTML5開發elementUI select組件默認選中效果實現的方法

今天扣丁學堂HTML5培訓老師給你們分享一篇關於elementUIselect組件默認選中效果實現的方法，文中經過示例代碼介紹的很是詳細，下面咱們一塊兒來看一下吧。

首先，v-model的值爲當前被選中的el-option的value屬性值，需求：進入編輯頁面，狀態欄默認選中生效，以下顯示：

html部分代碼：

<el-form-item label="狀態">
<el-select v-model="form.status" placeholder="請選擇">

<el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value">
</el-option>

</el-select>
</el-form-item>

data的form中定義status屬性：

再看data中options的定義，options爲選擇框中全部的可選內容，有label屬性（某一項的名字）和value屬性（某一項的具體的值），value纔是咱們須要的值，也是傳到後端的值，而label是展現給用戶看的值，重複一點：v-model的值爲當前被選中的el-option的value屬性值

options: [{

value: '1',
  label: '生效'
}, {
  value: '2',
  label: '失效'
}],

所以，若是須要默認選中生效選項，須要把生效對應的value賦給el-select的v-model

以上就是扣丁學堂HTML5培訓elementUI select組件默認選中效果實現的方法的所有內容，但願對你們的學習有所幫助，想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育平臺爲您提供權威的HTML5視頻教程供學員學習，HTML5培訓後的前景無限，行業薪資和將來的發展會愈來愈好的，扣丁學堂老師精心推出的HTML5視頻直播課定能讓你快速掌握HTML5從入門到精通開發實戰技能。