Avue

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名字,字典中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',
              class: 'test',
              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是否折叠提示,limit限制选择个数

<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,
          limit: 3,
          dicData: dicData
        }, {
          label: '下拉框',
          prop: 'select',
          type: 'select',
          multiple: true,
          collapseTags: true,
          maxCollapseTags: 3,
          limit: 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"
             ref="form">
    <template #province-type="{item,value,label}">
      <img src="/images/logo.png"
           style="width:20px" />
      <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]}`
            },
            change: (val) => {
              this.setSelectImg(val)
            },
            rules: [{
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }]
          }]
      }
    }
  },
  methods: {
    //这里利用修改dom元素去加图标
    setSelectImg (val) {
      let province = this.$refs.form.getPropRef('province').$refs.temp;
      let img = province.$el.children[0].children[0].children[0]
      img.setAttribute("style", `
          background: url('/images/logo.png') no-repeat; 
          background-position: 10px center; 
          background-size: 20px 20px; 
          padding-left:20px;
          text-indent: 30px;`);
    }
  }
}
</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>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档