詳解el-select組件選中值的獲取

el-select是ElementUI中的下拉選框組件，通常用於選擇單個或多個值。在實際的開發中，我們需要獲取選中的值來進行一些相關的操作。下面將從多個方面進行詳細闡述el-select的選中值的獲取。

一、獲取select選中的值

要獲取el-select組件選中的值，我們可以通過v-model指令來綁定一個data屬性，然後在方法中獲取該值。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
        <button @click="getValue">獲取選中值</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          getValue() {
            console.log(this.selectedValue);
          }
        }
      }
    </script>
  

在上面的代碼中，我們綁定了一個data屬性selectedValue，然後在getValue方法中獲取了該值並輸出。當用戶選中某個選項時， selectedValue的值也會相應地改變。

二、el-select默認選中的option

有時，我們需要在el-select中默認選中某個option。可以通過給v-model綁定一個默認值來實現。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: '2'
          }
        }
      }
    </script>
  

在上面的代碼中，我們將selectedValue的默認值設置為’2’，則在渲染el-select時，’選項2’將會默認被選中。

三、vue獲取select選中的值

如果我們使用vue去獲取el-select中選中的值，則可以將v-model的值直接綁定到一個vue實例的data中，具體代碼如下：

  
    <template>
      <div>
        <el-select v-model="form.selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            form: {
              selectedValue: ''
            }
          }
        }
      }
    </script>
  

上面的代碼中，我們將el-select的value屬性綁定到vue實例的form.selectedValue，然後可以直接通過 this.form.selectedValue 獲取選中的值。

四、el-select清除選中

有時，我們需要通過代碼的方式清除el-select當前選中的值，可以簡單地將選中的值置為空。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
        <button @click="clearValue">清除選中</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          clearValue() {
            this.selectedValue = '';
          }
        }
      }
    </script>
  

在上面的代碼中，我們定義了一個clearValue方法，在點擊按鈕時將selectedValue的值設置為空，這樣就可以清除el-select當前選中的值。

五、el-select無法選中

有時我們會遇到無法選中el-select的情況。一種常見的原因是el-select的數據項沒有設置value屬性。在el-option標籤中設置value屬性可以解決該問題。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
          <el-option label="選項4"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        }
      }
    </script>
  

在上面的代碼中，我們將’選項4’標籤中的value屬性去掉，則該選項將無法被選中。

六、el-select默認選中

有時，我們需要設置el-select的默認選中項，可以在mounted方法中通過代碼來實現。比如以下代碼：

  
    <template>
      <div>
        <el-select ref="mySelect">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        mounted() {
          this.$nextTick(() => {
            this.$refs.mySelect.remoteMethod('2');
          })
        }
      }
    </script>
  

上面的代碼中，我們在mounted方法中通過this.\$refs.mySelect.remoteMethod(‘2’)來設置’選項2’被默認選中。

七、el-select動態添加值

有時，我們需要動態添加el-select的選項，可以通過給el-select組件的options綁定一個數組，然後在數組中添加新的選項來實現。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <button @click="addOption">添加選項</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: '',
            options: [
              {label: '選項1', value: '1'},
              {label: '選項2', value: '2'}
            ]
          }
        },
        methods: {
          addOption() {
            this.options.push({label: '選項3', value: '3'});
          }
        }
      }
    </script>
  

在上面的代碼中，我們定義了一個options數組，然後在el-select的options屬性中進行綁定，通過addOption方法向options數組中添加新的選項。

八、獲取el-select選中的值和描述值

有時，我們需要獲取el-select選中的值及其描述值。可以通過給el-option設置label屬性來獲取描述值。比如以下代碼：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="選項1" value="1"></el-option>
          <el-option label="選項2" value="2"></el-option>
          <el-option label="選項3" value="3"></el-option>
        </el-select>
        <button @click="getSelected">獲取選中項值和描述值</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          getSelected() {
            let selectedOption = this.$refs.mySelect.selectedLabel;
            console.log('描述值：' + selectedOption);
            console.log('選中值：' + this.selectedValue);
          }
        }
      }
    </script>
  

在上面的代碼中，我們通過this.\$refs.mySelect.selectedLabel來獲取選中的option的描述值，通過選中的值是可以獲取的。