el-select设置默认值(附:两个示例代码)

 分类:前端开发时间:2023-05-30 07:30:01点击:

    在Element UI的`el-select`组件中,默认值需要通过`v-model`指令来绑定。你可以直接在`v-model`中绑定默认值,也可以通过给`el-select`组件设置`value`属性来实现。

Element UI中文官网

    以下是两个示例代码:

    1. 直接在`v-model`中绑定默认值的示例:

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedValue: 'option2'  // 将默认选中的值绑定到selectedValue中
    }
  }
}
</script>

    在上述代码中,我们直接将`selectedValue`的初始值设置为了`'option2'`,因此在页面渲染时,`el-select`组件会自动选中`value`为`'option2'`的选项作为默认值。

    2. 设置`value`属性来实现默认选择的示例:

<template>
  <el-select v-model="selectedValue" placeholder="请选择" :value="defaultValue">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select></template><script>export default {  data() {    return {      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],      selectedValue: '',      defaultValue: 'option3' // 将默认选中的值作为value属性的值
    }
  }
}</script>

    在这个例子中,我们将默认选中的值`'option3'`作为`el-select`组件的`value`属性值传入,这样在页面渲染时,`el-select`会将`value`属性所对应的选项作为默认值选中。

    需要注意的是,无论哪种方式,所绑定的默认值必须与`<el-option>`的`value`属性对应的值匹配才能正常起作用。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: