# Select 选择器

可指定`url`或者`options`，生成远程加载或静态选择的选择器

## 基础用法

设置一个静态选择器

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

::: snippet `options`设置选择器选项

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" :options="options"></z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { name: '张三', code: 'zs' },
        { name: '李四', code: 'ls' }
      ],
    }
  } 
}
</script>
```

:::

::: snippet 自定义选项

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" :options="options" :labelFormat="labelFormat">
      <template #default="{ item, value }">
        <div class="custom-option" :class="{ checked: item.code === value }">
          <span class="name">{{ item.name }}</span>
          <el-tag class="code" type="success" size="mini">{{ item.code }}</el-tag>
        </div>
      </template>
      <template #empty>
        <el-alert title="无匹配数据" type="error" :closable="false" />
      </template>
      <template #prefix>
        <i class="el-icon-search"></i>
      </template>
    </z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { name: '张三', code: 'zs' },
        { name: '李四', code: 'ls' }
      ],
    }
  },
  methods: {
    labelFormat(item) {
      return `[${item.name}]`;
    }
  }
}
</script>

<style>
.custom-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-option.checked {
  color: deepskyblue;
}
.name {
  font-weight: bold;
}
</style>
```

:::

</div>

## 设置多选

支持多选

::: snippet `multiple`设置多选

```html
<template>
  <div>
    <pre class="demo-model" v-if="model.length > 0">{{ model }}</pre>
    <z-select v-model="model" :options="options" multiple @change="onChange"></z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [],
      options: [
        { name: '张三', code: 'zs' },
        { name: '李四', code: 'ls' },
        { name: '王五', code: 'ww', disabled: true }
      ],
    }
  },
  methods: {
    onChange(value, selected) {
      console.log(JSON.parse(JSON.stringify(value)), JSON.parse(JSON.stringify(selected)));
    }
  }
}
</script>
```

:::

## 绑定对象

可以直接以对象作为绑定值

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

::: snippet `raw`设置为原值模式，默认以`valueKey`为主键

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" :options="options" raw></z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [],
      options: [
        { name: '张三', code: 'zs' },
        { name: '李四', code: 'ls' },
      ],
    }
  } 
}
</script>
```

:::

::: snippet 支持多选

```html
<template>
  <div>
    <pre class="demo-model" v-if="model.length > 0">{{ model }}</pre>
    <z-select v-model="model" :options="options" multiple raw></z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [],
      options: [
        { name: '张三', code: 'zs' },
        { name: '李四', code: 'ls' },
      ],
    }
  } 
}
</script>
```

:::

</div>

## 远程加载

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

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

::: snippet `url`设置加载地址，`http`设置请求库

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" url="/user/commonSelect" value-key="id" :http="$http" @change="onChange"></z-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  },
  methods: {
    onChange(value, item) {
      console.log(value, item);
    }
  }
}
</script>
```

:::

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

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" :queryApi="queryAPI"></z-select>
  </div>
</template>

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

:::

</div>

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

::: snippet `auto`设置自动加载一次数据

```html
<template>
  <div>
    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple auto></z-select>
  </div>
</template>

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

:::

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

```html
<template>
  <div>
    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple update raw></z-select>
  </div>
</template>

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

:::

</div>

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

::: snippet 单选时，当前选中项不包含在远程数据源中，可以通过`options`设置默认选项

```html
<template>
  <div>
    <pre class="demo-model" v-if="model">{{ model }}</pre>
    <z-select v-model="model" :queryApi="queryAPI" :options="options" auto></z-select>
  </div>
</template>

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

:::

::: snippet 多选时，当前选中项不包含在远程数据源中，可以通过`options`设置默认选项

```html
<template>
  <div>
    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple auto></z-select>
  </div>
</template>

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

:::

</div>

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value | 值 | String, Number, Boolean, Object, Array | - | -
placeholder | 占位符 | String | - | 请选择
options | 选项列表 | Array | - | []
labelFormat | 标签格式化 | Function | - | -
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
reserveKeyword | 保留当前的搜索关键词 | Boolean | - | true
selectProps | Element Select组件参数 | Object | - | -
raw | 是否绑定原始对象 | Boolean | - | false
url | 远程搜索URL | String | - | -
http | HTTP请求库 | Function | - | -
params | 请求参数 | Object | - | {}
queryApi | 自定义接口 | Function | - | -
triggerSize | 触发远程搜索的字段长度 | Number | - | 0
auto | 初始化时自动查询数据 | Boolean | - | true
update | 点开下拉框时更新数据 | Boolean | - | false
update-once | 点开下拉框时更新一次数据 | Boolean | - | false

## Events 事件

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