目录
- 前言
- 1. 实战Demo
- 2. 基本内容
前言
对应的拓展知识推荐阅读：【vue】vue>avue-crud表单属性配置（表格以及列）
本文主要补充实战遇到的问题以及优化的方式
1. 实战Demo
了解基础知识先从Demo入手！
获取数据库的内容，最终显示在下拉框中
<template>
<vue>avue-form :option="option"></vue>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>
<vue>avue-form :option="option"></vue>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>
<vue>avue-form :option="option"></vue>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 , //设置禁用状态，本身默认为false
clearable: false, // 设置可以清空选项
}
]
}
}
}
}
</script>
- ：增加一个value属性
- 禁用状态：增加
disabled: true，如果是单个字典禁用，则在字典数据中添加 - 清空选项：增加一个
clearable: false - 数据提示词：配置下拉数据中desc字段
对应如果增加分组:
<template>
<vue>avue-form :option="option"
v-model="obj"></vue>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>
<vue>avue-form :option="option"
v-model="form"></vue>avue-form>
</template>
<script>
var baseUrl = 'https://cli.vue>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>
