Element组件（select选择器）_default-first-option

---

格式

---

 v-model的值为当前被选中的el-option的value属性值

     

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      value: "",
    };
  },
};
</script>

---

禁用

---

 禁用状态：

        直接在<el-select>中加disabled

禁用选项

        在<el-option>中加

<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disable="item.disabled">
        </el-option>
    </el-select>
</template>
<script>
    export default{
        data(){
            return{
                options:[{
                    value:'option',
                    label:'option',
                    disabled:true
                }]
            }
        }
    }
</script>

---

清空按钮（仅适用于单选）

---

在<el-select>中添加clearable

---

多选 

---

在<el-select>中添加multiple

在<el-select>中另外再添加collapse-tags可以使多选的内容合并到一起

 

---

自定义option模板

---

将自定义的HEML模板插入到el-option的slot中 

    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>

---

选项进行分组

---

运用<el-option-group>对选项进行分组，

 

 

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option-group
      v-for="group in optionsGroup"
      :key="group.label"
      :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
    </el-option-group>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        optionsGroup: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value7: ''
      }
    }
  }
</script>

 

---

输入筛选（filterable）

---

通过给<el-select>添加 filterable（select组件可筛选，默认false）实现输入并筛选所有包含输入值的label

也可以通过传入一个filter-methid方法，该方法在输入值发生变化时调用，参数为当前输入值

---

远程搜索 

---

通过输入关键字在服务器上搜索数据

1.给<el-select>添加 filterable（select组件可筛选，默认false）和 remote（选项可以从服务器远程加载，默认false）

2.传入一个remote-method方法，在输入值发生变化时调用，参数为当前输入值

<template>
  <el-select
    v-model="value"
 
    multiple    //多选
 
    filterable    //可搜索
 
    remote    //远程搜索
 
    reserve-keyword    //多选且可搜索时，选中选项后保留当前的搜索关键词
    placeholder="请输入关键词"
 
    :remote-method="remoteMethod"    //传入方法
 
    :loading="loading">    //是否正在从远程获取数据
 
        <el-option
          v-for="item in options"
 
          :key="item.value"        //el-option是通过v-for渲染出来的时候需要添加key属性，且其值具有唯一性
          :label="item.label"
          :value="item.value">
        </el-option>
  </el-select>
</template>
 
<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        //默认现在并未从远程获取数据，不显示数据
        loading: false,
        //远程数据数组
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

---

创建新的选项 （allow-create）

---

创建并选中不存在的条目

给<el-select>添加allow-create（可通过在输入框中输入文字来创建新的条目）此时filterable必须为真

添加default-first-optin可以实现按下回车选择输入框的第一个匹配项

 

---

attributes

---

 

---

event

---