# Select选择框
# 基础用法
通过将type
属性的值指定为select
,同时配置dicData
为字典值
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '下拉框',
prop: 'select',
type: 'select',
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}]
}]
}
}
}
}
</script>
# 虚拟
在某些使用情况下,单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担,从而造成性能问题。 为了更好的用户和开发者体验
配置virtualize
为true
即可开启虚拟Dom模式
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '下拉框',
prop: 'select',
type: 'select',
virtualize: true,
dicData: new Array(10000).fill({}).map((ele, index) => {
return {
label: '选项' + (index + 1),
value: index + 1
}
})
}]
}
}
}
}
</script>
# 默认值
value
属性可以提供一个初始化的默认值
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '下拉框',
prop: 'select',
type: 'select',
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}],
value: 0
}
]
}
}
}
}
</script>
# 禁用状态
通过disabled
属性指定是否禁用
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '下拉框',
prop: 'select',
type: 'select',
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}],
disabled: true
}
]
}
}
}
}
</script>
# 禁用选项
返回的字典中数据配置disabled
属性指定是否禁用
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '下拉框',
prop: 'select',
type: 'select',
dicData: [{
label: '字典1',
value: 0,
disabled: true
}, {
label: '字典2',
value: 1
}]
}
]
}
}
}
}
</script>
# 可清空
使用clearable
属性即可得到一个可清空的输入框,默认为true
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '下拉框',
prop: 'input',
type: 'select',
clearable: false,
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}]
}
]
}
}
}
}
</script>
# 辅助语
配置下拉数据中desc
字段
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '下拉框',
prop: 'select',
type: 'select',
dicData: [{
label: '字典1',
desc: '字典描述',
value: 0
}, {
label: '字典2',
value: 1
}]
}]
}
}
}
}
</script>
# 字典属性
指定标签文本和值,默认为label和value
配置props
属性来指定标签文本和值,默认为label
和value
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '下拉框',
prop: 'select',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicData: [{
name: '字典1',
code: 0
}, {
name: '字典2',
code: 1
}]
}]
}
}
}
}
</script>
# 下拉框样式
.popperClass .el-select-dropdown__item{
background-color: rgba(0,0,0,.2);
}
popperClass
属性配置样式的class
名字
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '下拉框',
prop: 'select',
type: 'select',
popperClass: 'popperClass',
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}]
}
]
}
}
}
}
</script>
# 网络字典
更多用法参考表单数据字典
配置dicUrl
指定后台接口的地址
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '下拉框',
prop: 'select2',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
}]
}
}
}
}
</script>
# 基础多选
设置multiple
属性即可启用多选,此时值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapseTags
属性将它们合并为一段文字,同时配合maxCollapseTags
最大显示个数和collapseTagsTooltip
是否折叠提示
<template>
<avue-form v-model="form"
:option="option"></avue-form>
</template>
<script>
const dicData = [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}, {
label: '字典3',
value: 2
}]
export default {
data () {
return {
form: {
select: [0, 1, 2]
},
option: {
column: [{
label: '下拉框',
prop: 'select',
type: 'select',
multiple: true,
dicData: dicData
}, {
label: '下拉框',
prop: 'select',
type: 'select',
multiple: true,
collapseTags: true,
maxCollapseTags: 3,
collapseTagsTooltip: true,
dicData: dicData
}]
}
}
}
}
</script>
# 创建条目和搜索
使用allowCreate
属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable
必须为真
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: '创建',
prop: 'select',
type: 'select',
allowCreate: true,
filterable: true,
dicData: [{
label: '字典1',
value: 0
}, {
label: '字典2',
value: 1
}]
}]
}
}
}
}
</script>
# 自定义模板
配置props
名称加Type
卡槽开启即可自定义下拉框的内容,typeformat
配置回显的内容,但是你提交的值还是value
并不会改变
<template>
<avue-form :option="option"
v-model="form">
<template #province-type="{item,value,label}">
<span>{{ item }}</span>
</template>
</avue-form>
</template>
<script>
export default {
data () {
return {
form: {
province: '120000'
},
option: {
column: [
{
label: '单选',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
typeformat (item, label, value) {
return `值:${item[label]}-名:${item[value]}`
},
rules: [{
required: true,
message: '请选择省份',
trigger: 'blur'
}]
}]
}
}
}
}
</script>
# 多级联动
cascader
为需要联动的子选择框prop
值,填写多个就会形成一对多的关系
<template>
<avue-form :option="option"
v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data () {
return {
form: {
province: '110000',
city: '110100',
area: '110101'
},
option: {
column: [{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
cascader: ['city'],
dicUrl: `${baseUrl}/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
},
{
label: '城市',
prop: 'city',
type: 'select',
cascader: ['area'],
props: {
label: 'name',
value: 'code'
},
row: true,
dicUrl: `${baseUrl}/getCity/{{key}}?province={{province}}`,
rules: [
{
required: true,
message: '请选择城市',
trigger: 'blur'
}
]
},
{
label: '地区',
prop: 'area',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getArea/{{key}}?city={{city}}`,
rules: [
{
required: true,
message: '请选择地区',
trigger: 'blur'
}
]
}]
}
}
}
}
</script>
# 远程搜索
当你的下拉框数据量很大的时候,你可以启动远程搜索
配置remote
为true
即可开启远程搜索,其中dicUrl
中'{{key}}'
为用户输入的关键字
<template>
<avue-form :option="option"
v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data () {
return {
form: {
province: '110000',
province1: '110000,120000,130000,140000',
},
option: {
column: [
{
label: '省份单选',
prop: 'province',
type: 'select',
remote: true,
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince?id={{key}}`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}, {
label: '省份多选',
prop: 'province1',
type: 'select',
multiple: true,
remote: true,
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince?id={{key}}`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}
]
}
}
}
}
</script>
# 分组
配置group
为true
即可开启分组模式
<template>
<avue-form :option="option"
v-model="obj"></avue-form>
</template>
<script>
export default {
data () {
return {
obj: {
select: 'Shanghai'
},
option: {
column: [
{
label: '分组',
prop: 'select',
type: 'select',
group: true,
dicData: [{
label: '热门城市',
groups: [{
value: 'Shanghai',
label: '上海',
desc: '描述'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
groups: [{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}]
}
]
}
}
}
}
</script>
# 拖拽
<!-- 导入需要的包 (一定要放到index.html中的head标签里) -->
<script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
配置drag
为true
即可开启拖拽模式
<template>
<avue-form :option="option"
v-model="obj"></avue-form>
</template>
<script>
export default {
data () {
return {
obj: {
select: ['Shanghai', 'Beijing', 'Shenzhen']
},
option: {
column: [
{
label: '拖拽',
prop: 'select',
type: 'select',
drag: true,
multiple: true,
dicData: [{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}, {
value: 'Shenzhen',
label: '深圳'
}]
}
]
}
}
}
}
</script>