深入el-option點擊事件

一、觸發點擊事件

使用element-ui時，我們經常會使用它的下拉框el-select組件，它會包含多個el-option子組件，我們可以通過監聽el-select的change事件或者在el-option中直接監聽click事件來觸發點擊事件。

  
    <el-select v-model="selectedValue" @change="handleChange">  
      <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value" @click="handleClick(item)"></el-option>  
    </el-select>

上面的代碼中，我們通過在el-option上綁定@click事件來監聽點擊事件，從而觸發handleClick方法。這種方式相比監聽el-select的change事件具有更高的靈活性。

二、獲取選中值

在處理點擊事件時，我們通常會需要獲取當前所點擊的el-option的value或者label值，從而進行後續操作。我們可以通過獲取事件對象的target屬性來獲取當前所點擊的元素，再進一步獲取其綁定的value或者label值。

  
    handleClick(item) {  
      console.log(item.value);  
      console.log(item.label);  
    }

在上面的代碼中，我們傳入了el-option的item對象，通過訪問它的value和label屬性來獲取當前所選中的值。如果需要獲取所選的所有值，我們可以通過在el-select上使用multiple屬性，將獲取到的值存儲在數組中。

三、動態改變選項

有時，我們需要在運行時動態改變el-option的選項，可以通過直接修改options數組中的元素，或者通過動態添加或刪除el-option子組件來實現。

  
    <el-select v-model="selectedValue">  
      <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value"></el-option>  
    </el-select>  
    <el-button @click="addOption">添加選項</el-button>  
    <el-button @click="deleteOption">刪除選項</el-button>

  
    data() {  
      return {  
        options: [  
          { label: '選項1', value: 1 },  
          { label: '選項2', value: 2 },  
          { label: '選項3', value: 3 }  
        ],  
        selectedValue: ''  
      }  
    },  
    methods: {  
      addOption() {  
        this.options.push({ label: '新選項', value: 4 });  
      },  
      deleteOption() {  
        this.options.pop();  
      }  
    }

在上面的代碼中，我們通過修改options數組來增加或刪除選項，由於使用了v-for指令來渲染el-option，因此我們只需修改options數組，頁面的渲染就會發生相應的變化。

四、禁用選項

有時，我們需要在特定情況下禁用某個選項，我們可以通過給el-option綁定disabled屬性或者在渲染時根據條件動態綁定disabled屬性來實現。

  
    <el-select v-model="selectedValue">  
      <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>  
    </el-select>

上面的代碼中，我們通過el-option的disabled屬性來禁用選項，在options數組中可以通過為某個元素添加disabled屬性來禁用特定的選項。

五、自定義選項模板

另外，我們還可以自定義el-option的模板來滿足我們的需求。通過設置el-option的slot=”default”，我們可以自定義el-option顯示的內容，並且可以綁定事件來處理點擊事件。

  
    <el-select v-model="selectedValue">  
      <el-option v-for="item of options" :key="item.value" :value="item.value">  
        <span>{{ item.label }}  
        <i class="el-icon-edit" slot="default" @click="handleEdit(item)"></i>  
      </el-option>  
    </el-select>

上面的代碼中，我們使用了一個icon來作為el-option的操作按鈕，並且通過設置slot=”default”來自定義el-option的內容。如果需要修改樣式，我們可以在對應的class中添加CSS樣式來實現。

原創文章，作者：WVBBB，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/369038.html