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

目录

• 前言
• [1. 实战Demo](#1. 实战Demo)
• [2. 基本内容](#2. 基本内容)

前言

对应的拓展知识推荐阅读：【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 , //设置禁用状态，本身默认为false
            clearable: 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>