elementui下拉框默认选中个_elementui下拉按钮

在使用Element UI的下拉框（el-select）时，有时我们需要在页面加载时默认选中个选项。本文将介绍如何实现这一功能，并提供多种解决方案。

解决方案概述

要在Element UI的下拉框中默认选中个选项，可以通过以下几种方法实现：

数据绑定：通过数据绑定的方式，在组件初始化时设置默认值。
事件监听：在下拉框加载完成后，通过事件监听设置默认值。
自定义指令：使用Vue的自定义指令来实现默认选中。

方法一：数据绑定

代码示例

html

  
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"</p>

<blockquote>
  <p>
    
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  created() {
    if (this.options.length > 0) {
      this.selectedValue = this.options[0].value;
    }
  }
};


<p>

解释

data：定义了selectedValue和options两个数据属性。
created：在组件创建时，检查options数组是否为空，如果不为空，则将个选项的值赋给selectedValue。

方法二：事件监听

代码示例

html

  
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"</p>

<blockquote>
  <p>
    
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  methods: {
    handleVisibleChange(visible) {
      if (visible && this.selectedValue === '') {
        this.selectedValue = this.options[0].value;
      }
    }
  }
};


<p>

解释

ref：给el-select添加一个引用selectRef，以便在方法中访问它。
@visible-change：监听下拉框的可见状态变化，当下拉框次显示时，如果selectedValue为空，则设置为个选项的值。

方法三：自定义指令

代码示例

html

  
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"</p>

<blockquote>
  <p>
    
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  directives: {
    defaultFirst: {
      inserted(el, binding, vnode) {
        const select = vnode.componentInstance;
        if (select && select.$options.name === 'ElSelect') {
          setTimeout(() => {
            if (select.value === '' && select.options.length > 0) {
              select.value = select.options[0].value;
            }
          }, 0);
        }
      }
    }
  }
};


<p>