# Select
# 描述
# dom方式使用
z-select可以在z-edit-table``z-form-item中使用,也可以单独使用.
点击查看代码
<template>
<div>
<h3>正常</h3>
<z-select v-model="select" :data="option"></z-select>
<H3>分组</H3>
<z-select v-model="select1" :data="groupOption"></z-select>
<h3>插槽</h3>
<z-select v-model="select2" :data="option" multiple collapse-tags>
<template #option="scope">
<span class="text-red">想不到吧,我还能用插槽</span> {{ scope.option.label }}
</template>
</z-select>
<h3>过滤</h3>
<z-select :loading="loading" v-model="select3" :data="option" filterable>
<template #empty>
什么都找不到,但是我可以自定义空数据时的插槽
<br>
<img src="../public/logo.png" style="width: 30px; height: 30px;" alt="">
</template>
</z-select>
<h3>远程过滤</h3>
<z-select :loading="loading" v-model="select3" :data="option" filterable :remote-method="remoteMethod"
remote></z-select>
<h3>data数据为Promise类型</h3>
<z-select v-model="select4" :data="lazeOption">
<template #option="scope">
<span class="text-red">想不到吧,我还能用插槽</span> {{ scope.option.label }}
</template>
</z-select>
<h3>过滤</h3>
<z-select :loading="loading" v-model="select2" :data="option" filterable multiple allow-create></z-select>
</div>
</template>
<script>
export default {
name: 'zSelectDemo',
data() {
return {
loading: false,
select: '北京',
select1: '北京2',
select2: ['上海', '北京'],
select3: '北京',
select4: '北京',
option: [
{
label: '上海',
value: '上海'
},
{
label: '北京',
value: '北京'
},
{
label: '上海1',
value: '上海1'
}
],
groupOption: [
{
label: '第一组',
data: [
{
label: '上海1',
value: '上海1'
},
{
label: '北京2',
value: '北京2'
}
]
},
{
label: '第二组',
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京1',
value: '北京1'
}
]
}
],
lazeOption: () => {
return new Promise((resolve, reject) => {
const options = [
{
label: '上海2',
value: '上海2'
},
]
setTimeout(() => {
resolve(options)
}, 3000)
})
}
}
},
methods: {
async remoteMethod(query) {
if (query !== '') {
this.loading = true
this.option = await this.createFilter(query)
} else {
this.option = this.option
}
this.loading = false
},
createFilter(query) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
{
label: '上海2',
value: '上海2'
},
{
label: '北京1',
value: '北京1'
}
])
}, 2000)
})
}
}
}
</script># 使用config配置方式
注意
此种方式需要依赖 el-form z-form-item 如果你只是需要一个选择框的表单,推荐使用 dom方式 创建.
点击查看代码
<template>
<el-form :model="form" ref="form" v-bind="$attrs" :label-width="'180px'" label-suffix=":->">
<zFormItem v-for="(item, index) in formList" :key="item.label" v-bind="item" :form="form">
</zFormItem>
</el-form>
</template>
<script>
export default {
name: 'zSelectFormDemo',
data() {
return {
form: { 'age1': '上海' },
formList: [
{
prop: 'age',
label: '年龄',
render: 'z-select',
option: {
data: [
19, 20, 21
],
placeholder: '请输入年龄'
},
defaultValue: 20
},
{
prop: 'age1',
label: 'string数据',
render: 'z-select',
option: {
data: () => {
return new Promise((resolve, reject) => {
const options = [
{
label: '上海2',
value: '上海2'
}
]
setTimeout(() => {
resolve(options)
}, 8000)
})
},
placeholder: '请输入年龄'
},
},
{
prop: 'age2',
label: '自定义数据',
render: 'z-select',
option: {
data: [
{
label: '组名1',
data: [
{
label: '上海',
value: '上海'
},
{
label: '上海3',
value: '上海3'
},
{
label: '北京4',
value: '北京4'
}
]
},
{
label: '组名2',
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京2',
value: '北京2'
},
{
label: '北京3',
value: '北京3'
}
]
}
],
placeholder: '请输入年龄'
},
},
{
prop: 'age4',
label: '过滤',
render: 'z-select',
slots: {
empty: '没有数据啊'
},
option: {
data: [
{
label: '组名1',
data: [
{
label: '上海',
value: '上海'
},
{
label: '北京4',
value: '北京4'
}
]
}, {
label: '组名2',
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京3',
value: '北京3'
}
]
}
],
placeholder: '请输入年龄',
filterable: true
},
},
{
prop: 'age5',
label: '插槽',
render: 'z-select',
option: {
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京2',
value: '北京2'
}
]
},
slots: {
option: ({ option, index }) => {
return <span>{option.label}--{index}</span>
},
prefix: () => {
return <i class={'el-icon-eleme text-red'}></i>
},
}
}
]
};
}
};
</script>
# Select Attributes
| 参数 | 说明 | 类型 |
|---|---|---|
| data | 可选项列表 | Array, Function, Promise, String 详情 |
| props | data中字段,默认为{ label: 'label', value: 'value' } | Object |
| loadingText | 加载过程中的提示文字 | String |
| noDataText | 没有数据时的提示文字 | String |
| noMatchText | 没有相关匹配结果时的提示文字 | String |
| loding | 是否处于加载状态 | Boolean |
| ... | ... | 查看更多 | Element (opens new window) |
# 插槽
| 插槽名称 | 说明 | 使用 |
|---|---|---|
| option | option选项插槽,需要自定义时可以使用此插槽 | config模式:将其加入slots中即可, dom模式:将其包裹在 z-select中即可 |
| empty | 无数据时的插槽 | config模式:可以直接传递String类型 dom模式:将其包裹在 z-select中即可 |
| prefix | 前缀插槽 | config模式:将其放在slots对象中 dom模式:将其包裹在 z-select中即可 |