EtSelect example:

- 基础用法

```vue
<template>
  <EtSelect v-model="value" placeholder="请选择">
    <EtOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </EtOption>
  </EtSelect>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
    }
  },
}
</script>
```

- 基础多选

```vue
<template>
  <div>
    <EtSelect v-model="value1" multiple placeholder="请选择" style="display: inline-block;">
      <EtOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </EtOption>
    </EtSelect>

    <EtSelect v-model="value2" multiple collapse-tags style="margin-left: 20px; display: inline-block;" placeholder="请选择">
      <EtOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </EtOption>
    </EtSelect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶双皮奶双皮奶双皮奶双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面龙须面龙须面龙须面龙须面龙须面龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭北京烤鸭北京烤鸭北京烤鸭北京烤鸭北京烤鸭',
        },
      ],
      value1: [],
      value2: [],
    }
  },
}
</script>
```

- 分组

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

- 滚动加载更多加载

```vue
<template>
  <EtSelect v-model="value" placeholder="请选择" scroll-more :scroll-more-method="onLoadMore" :scroll-loading="loading">
    <EtOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></EtOption>
  </EtSelect>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
        {
          value: '选项6',
          label: '炸酱面',
        },
        {
          value: '选项7',
          label: '臭豆腐',
        },
      ],
      value: '',
      loading: false,
      index: 8,
    }
  },

  methods: {
    onLoadMore() {
      this.loading = true
      setTimeout(() => {
        this.index++
        this.options.push({
          value: `选项${this.index}`,
          label: '螺蛳粉',
        })
        this.loading = false
      }, 2000)
    },
  },
}
</script>
```