ElementUI Select默认值的详细阐述

一、默认值的概念

在ElementUI Select中，默认值是指当页面初始化或者Select组件重置时，选择框中预选定的值，这个默认值可以是静态的，也可以是动态的，是使用Select组件时重要的一部分。

ElementUI Select提供了两种默认值的设置方式：

1. 使用v-model绑定默认值。
2. 使用value属性设置默认值。

二、使用v-model绑定默认值

使用v-model可以将Select的值与组件外的变量绑定。在页面初始化之后，选取框的默认值就是v-model所绑定的变量的值。通过改变这个绑定变量的值，可以实现对代码中Select组件默认值的修改。

  
    <template>
      <div>
        <el-select v-model="selectedValue" placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value">
            {{item.label}}
          </el-option>
        </el-select>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            selectedValue: '默认值',
            options: [
              {
                label: '选项1',
                value: '选项1的值'
              },
              {
                label: '选项2',
                value: '选项2的值'
              }
            ]
          }
        }
      }
    </script>
  

三、使用value属性设置默认值

ElementUI Select通过value属性设置默认值也是一种常用方法。这个值在页面初始化之后，就会在选取框中展示。同样使用v-model绑定变量的方法可以修改Select组件中的默认值。

  
    <template>
      <div>
        <el-select v-model="selectedValue" placeholder="请选择" :value="defaultValue">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value">
            {{item.label}}
          </el-option>
        </el-select>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            selectedValue: '',
            defaultValue: '选项1的值',
            options: [
              {
                label: '选项1',
                value: '选项1的值'
              },
              {
                label: '选项2',
                value: '选项2的值'
              }
            ]
          }
        }
      }
    </script>
  

四、默认值的动态更新

在使用ElementUI Select组件时，有时需要在用户执行某个操作时动态修改默认值，这个时候可以使用Vue.js提供的watch监听器，监听默认值的改变。

  
    <template>
      <div>
        <el-select v-model="selectedValue" placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value">
            {{item.label}}
          </el-option>
        </el-select>
        <el-button @click="onButtonClick">点击我动态更新默认值</el-button>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            selectedValue: '',
            options: [
              {
                label: '选项1',
                value: '选项1的值'
              },
              {
                label: '选项2',
                value: '选项2的值'
              }
            ]
          }
        },
        watch: {
          // 监听selectedValue的变化
          selectedValue: function (newValue) {
            console.log('selectedValue的值改变了：' + newValue)
          }
        },
        methods: {
          onButtonClick() {
            // 动态修改默认值
            this.selectedValue = '选项2的值'
          }
        }
      }
    </script>
  

五、默认值为空的情况处理

当ElementUI Select组件的默认值为空时，将无法显示选项框中已选的默认值。解决这个问题的方法是在设置默认值时，使用空字符串或者null值。

  
    <template>
      <div>
        <el-select v-model="selectedValue" placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            {{item.label}}
          </el-option>
        </el-select>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            selectedValue: '',
            options: [
              {
                label: '选项1',
                value: '选项1的值'
              },
              {
                label: '选项2',
                value: '选项2的值'
              }
            ]
          }
        }
      }
    </script>