Select 选择器
可指定url或者options，生成远程加载或静态选择的选择器
762c0c2a37be4d85cbae7970985a8280ab27a299/examples/views/docs/component/select.md#">基础用法
设置一个静态选择器
::: snippet options设置选择器选项
<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 自定义选项
<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>
:::
762c0c2a37be4d85cbae7970985a8280ab27a299/examples/views/docs/component/select.md#">设置多选
支持多选
::: snippet multiple设置多选
<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>
:::
762c0c2a37be4d85cbae7970985a8280ab27a299/examples/views/docs/component/select.md#">绑定对象
可以直接以对象作为绑定值
::: snippet raw设置为原值模式，默认以valueKey为主键
<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 支持多选
<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>
:::
762c0c2a37be4d85cbae7970985a8280ab27a299/examples/views/docs/component/select.md#">远程加载
可以通过设置queryApi自定义查询接口，也可以设置url及http进行内置格式的查询，其中http可在组件库全局配置
::: snippet url设置加载地址，http设置请求库
<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自定义查询接口
<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>
:::
::: snippet auto设置自动加载一次数据
<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设置每次打开下拉框都保持最新数据
<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>
:::
::: snippet 单选时，当前选中项不包含在远程数据源中，可以通过options设置默认选项
<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设置默认选项
<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>
:::
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 | 改变选中 | 值，选中项数据