Avue实现选择下拉框的多种方式

前言

对应的拓展知识推荐阅读：【vue】avue-crud表单属性配置（表格以及列）

本文主要补充实战遇到的问题以及优化的方式

1. 实战Demo

了解基础知识先从Demo入手！

获取数据库的内容，最终显示在下拉框中

<template><avue-form :option="option"></avue-form>
</template>
<script>let baseUrl = '/manongyanjiuseng';export default {data () {return {option: {column: [{label: "设备编号",prop: "equipmentNo",width:90,search:true,rules: [{required: true,message: "请输入设备编号",trigger: "blur"}],dicUrl: `${baseUrl}/info/queryAllByTenantId?tenantId=`+website.tenantId,type: "tree",clearable:false,searchSpan: 4,props: {label: 'equipmentNo',value: 'equipmentNo'},},}}}
}
</script>

对应捕捉后端数据的内容

此处主要以Java为主，也展示下：

/*** 根据租户查询* @param tenantId* @return*/
@GetMapping("/queryAllByTenantId")
@ApiOperationSupport(order=15)
@ApiOperation(value = "全部" , notes = "传入租户")
public R<List<Info>> queryAllByTenantId(String tenantId){List<Info> list = infoService.list(new QueryWrapper<Info>().eq("tenant_id", tenantId).orderByAsc("equipment_no"));return  R.data(list);
}

对应的Java内容推荐阅读：java框架零基础从入门到精通的学习路线附开源项目面经等（超全）

如果数据库的内容比较少，可以通过前端的字典属性补充：

<template><avue-form :option="option"></avue-form>
</template>
<script>const DIC= {LEVEL:[{ label: "低", value: "低" },{ label: "中", value: "中" },{ label: "高", value: "高" }],
}
export default {data () {return {option: {column: [{label: "报障等级",prop: "level",search:true,width:70,rules: [{required: true,message: "请输入报障等级",trigger: "blur"}],searchSpan: 4,type: "select", // 使用下拉框选择类型dicData: DIC.LEVEL // 数据字典},}}}
}
</script>

2. 基本内容

拉回正文，上述文章讲述

通过将type属性的值指定为select,同时配置dicData为字典值
配置dicUrl指定后台接口的地址

对应Select选择框还有其他的属性玩法：

最基本的Demo如下：

<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,desc: '字典描述' // 配置下拉数据中desc字段,主要是该数据的提示词}, {label: '字典2',value: 1,disabled: true // 单个数据字典进行禁用，本身默认为false}],value: 0 , // 增加默认值，去除的话，默认没有默认值disabled: true , //设置禁用状态，本身默认为falseclearable: false, // 设置可以清空选项}]}}}
}
</script>

：增加一个value属性
禁用状态：增加disabled: true，如果是单个字典禁用，则在字典数据中添加
清空选项：增加一个clearable: false
数据提示词：配置下拉数据中desc字段

对应如果增加分组:

<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>

增加多级联动：

<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>