大气学校网站模板,直播网站建设书籍,珠海市 网站建设,西安网站设计学校目录 前言1. 实战Demo2. 基本内容 前言
对应的拓展知识推荐阅读#xff1a;【vue】avue-crud表单属性配置#xff08;表格以及列#xff09;
本文主要补充实战遇到的问题以及优化的方式
1. 实战Demo
了解基础知识先从Demo入手#xff01;
获取数据库的内容#xff0c… 目录 前言1. 实战Demo2. 基本内容 前言
对应的拓展知识推荐阅读【vue】avue-crud表单属性配置表格以及列
本文主要补充实战遇到的问题以及优化的方式
1. 实战Demo
了解基础知识先从Demo入手
获取数据库的内容最终显示在下拉框中
templateavue-form :optionoption/avue-form
/template
scriptlet 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?tenantIdwebsite.tenantId,type: tree,clearable:false,searchSpan: 4,props: {label: equipmentNo,value: equipmentNo},},}}}
}
/script对应捕捉后端数据的内容
此处主要以Java为主也展示下
/*** 根据租户查询* param tenantId* return*/
GetMapping(/queryAllByTenantId)
ApiOperationSupport(order15)
ApiOperation(value 全部 , notes 传入租户)
public RListInfo queryAllByTenantId(String tenantId){ListInfo list infoService.list(new QueryWrapperInfo().eq(tenant_id, tenantId).orderByAsc(equipment_no));return R.data(list);
}对应的Java内容推荐阅读java框架 零基础从入门到精通的学习路线 附开源项目面经等超全
如果数据库的内容比较少可以通过前端的字典属性补充
templateavue-form :optionoption/avue-form
/template
scriptconst 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 // 数据字典},}}}
}
/script2. 基本内容
拉回正文上述文章讲述
通过将type属性的值指定为select,同时配置dicData为字典值配置dicUrl指定后台接口的地址
对应Select选择框还有其他的属性玩法
最基本的Demo如下
templateavue-form :optionoption/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字段
对应如果增加分组:
templateavue-form :optionoptionv-modelobj/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增加多级联动
templateavue-form :optionoptionv-modelform/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
