# Select 选择组件

# 引入

import { H3Select } from '@lateinos/awesome-ui';

export default {
  components: {
    H3Select,
    H3SelectOption: H3Select.Option
    H3SelectOptGroup: H3Select.OptGroup
  }
}

# 基本用法 h3

当 defaultValue 和 value(v-model) 为 ''、null、['']、[null]等情况

<template>
  <div style="margin: 0 auto;">
    <span style="margin-right: 20px;">h3-select</span>
    <h3-select defaultValue="" disabled placeholder="请选择" style="width: 200px">
       <h3-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </h3-select-option>
    </h3-select>
    &nbsp;&nbsp;
    <h3-select v-model="value" @change="change" placeholder="请选择" style="width: 200px" :allow-clear="true" >
       <h3-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </h3-select-option>
    </h3-select>
    &nbsp;&nbsp;
    <h3-select v-model="multipleValue" mode="multiple" @change="change" placeholder="请选择" style="width: 200px">
       <h3-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </h3-select-option>
    </h3-select>
    <br/>
    <br/>
     <span style="margin-right: 20px;">a-select&nbsp;&nbsp;</span>
    <a-select defaultValue="" placeholder="请选择" style="width: 200px">
       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
    &nbsp;&nbsp;
    <a-select v-model="value" @change="change" placeholder="请选择" style="width: 200px">
       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
    &nbsp;&nbsp;
    <a-select v-model="multipleValue" mode="multiple" @change="change" placeholder="请选择" style="width: 200px">
       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
  </div>
</template>
<script lang="ts">
export default {
  name: 'H3SelectDemoOne',
  data () {
    return {
      value: ' ',
      multipleValue: [' '],
    }
  },
  methods: {
    change (a,b) {
      console.log(a,b);
    }
  }
}
</script>

# 从数据生成

提示

如果 options 值中存在 value = 0 情况，即：

[{
  value: 0,
  label: '0',
}, {
  value: 1,
  label: '1',
}, {
  value: 2,
  label: '2',
}];

会导致错误激活效果，例子如下面a-select的错误效果

这是因为官方代码中非值判定导致该错误效果出现，已经给官方提出 issue (opens new window)

临时解决方案是将h3-select的defaultActiveFirstOption默认设置为false，禁止默认显示激活项 h3

# 使用插槽

# API

仅仅处理了defaultValue 和 value 为 ''、null、['']、[null]等情况其他api请参考官方api (opens new window)

← Popconfirm 气泡确认框 TreeSelect 树选择 →