Question

我有一个el-select，它使用v-for从数组中填充数据；我想在加载数组中的值时设置默认值，但是如果我想要的话，仍然可以选择其他值...

代码

<el-select class="select-large" @change="getRate(recipient_type_id)" v-model="recipient_type_id"
      placeholder="Select">
     <el-option
        v-for="(item) in recipientDetails"
           :key="item.id"
           :label="item.display_name"
           :value="item.type_details">
     </el-option>
 </el-select>

该数组为 recipientDetails ，我有一个默认收件人，应首先加载而不是占位符...

预先感谢

Answer 1

在select上使用v模型时，不能在选项上使用selected属性。

由于您已将选择绑定到recipient_type_id，因此一旦数据加载完毕，我建议您遍历recipientDetails中的项目，并找到具有type_details属性的项目应该是默认值，然后将值分配给recipient_type_id

this.recipientDetails.forEach(detail => {
    if(detail.tpye_details == default_value){
        this.recipient_type_id = detail.type_details
    }
}

Answer 2

您可以通过设置{的:selected属性的值来选择选项

     <el-option
        v-for="(item) in recipientDetails"
           :selected="other_detail"
           :key="item.id"
           :label="item.display_name"
           :value="item.type_details">
     </el-option>

如果other_detail等于:value值，则选择该选项。

Answer 3

我发现最简单的方法是将分配给 recipient_type_id 的默认值是 data（） ，然后它将自动过滤。 / p>

VueJS + element.eleme.io如何为el-select设置默认选项值

3 个答案: