# Select 选择器

拓展ElementUI的`el-select`，支持快捷配置数据源。

## 基础用法

适用广泛的基础单选

<div class="code-snippet-box">

::: snippet 设置`options`配置选择器数据源

```html
<template>
  <z-select v-model="model" :options="options"></z-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  } 
}
</script>
```

:::

::: snippet 配置`option`**插槽**可自定义选项样式

```html
<template>
  <z-select v-model="model" :options="options">
    <template #option="{ item, value }">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>{{ item.label }}</span>
        <el-tag size="mini">{{ item.type }}</el-tag>
      </div>
    </template>
  </z-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN', type: '国产' },
        { label: '牵引车', value: 'TRACTOR', type: '进口' }
      ],
    }
  },
}
</script>
```

:::

</div>

<div class="code-snippet-box">

::: snippet 设置`filterable`启用搜索功能

```html
<template>
  <z-select v-model="model" :options="options" filterable></z-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  },
}
</script>
```

:::

::: snippet 设置`clearable`可清空选项

```html
<template>
  <z-select v-model="model" :options="options" clearable></z-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  },
}
</script>
```

:::

</div>

<div class="code-snippet-box">

::: snippet 支持直接配置`<el-option>`子项

```html
<template>
  <z-select v-model="model">
    <el-option label="单车" value="VAN">单车</el-option>
    <el-option label="牵引车" value="TRACTOR">牵引车</el-option>
  </z-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  } 
}
</script>
```

:::

</div>

## 设置多选

多选时支持字符串或数组类型的值

<div class="code-snippet-box">

::: snippet 设置`multiple`开启多选，选中值为**数组**类型

```html
<template>
  <div>
    <z-select v-model="model" :options="options" multiple></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: ['zs', 'ls'],
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>
```

:::

::: snippet 设置`stringify`后，选中值为**字符串**类型

```html
<template>
  <div>
    <z-select v-model="model" :options="options" multiple stringify></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: 'zs,ls',
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>
```

:::

</div>

<div class="code-snippet-box">

::: snippet 设置`sequence`固定序列，选中顺序与数据源顺序保持一致

```html
<template>
  <div>
    <z-select v-model="model" :options="options" multiple sequence style="min-width: 300px;"></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [],
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>
```

:::

</div>

## 远程加载

可以通过设置`queryApi`自定义查询接口，也可以设置`url`及`http`进行内置格式的查询，其中`http`可在组件库全局配置

<div class="code-snippet-box">

::: snippet `queryApi`自定义查询接口

```html
<template>
  <div>
    <z-select v-model="model" :options="options" :queryApi="queryAPI"></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>
```

:::

</div>

<div class="code-snippet-box">

::: snippet `lazy`设置懒加载，即初始化后不自动执行查询，而是第一次点击下拉时加载

```html
<template>
  <div>
    <z-select v-model="model" :queryApi="queryAPI" lazy></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>
```

:::

</div>

<div class="code-snippet-box">

::: snippet `update`设置每次打开下拉框都保持最新数据

```html
<template>
  <div>
    <z-select v-model="model" :queryApi="queryAPI" :options="options" update></z-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>
```

:::

</div>

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value | 值 | String, Number, Boolean, Object, Array | - | -
placeholder | 占位符 | String | - | 请选择
options | 选项列表 | Array | - | []
labelKey | 标签字段名 | String | - | name
valueKey | 值字段名 | String | - | code
searchKey | 搜索字段名 | String | - | query
size | 大小 | String | mini、small、large | mini
multiple | 多选 | Boolean | - | false
disabled | 禁用 | Boolean | - | false
clearable | 可清除 | Boolean | - | true
filterable | 可搜索 | Boolean | - | true
queryApi | 自定义接口 | Function | - | -
lazy | 初始化后懒加载数据 | Boolean | - | true
update | 点开下拉框时更新数据 | Boolean | - | false

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 改变选中 | 值，选中项数据