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

目录

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

前言

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

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

1. 实战Demo

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

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

html 复制代码
<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为主,也展示下:

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框架 零基础从入门到精通的学习路线 附开源项目面经等(超全)

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

html 复制代码
<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如下:

html 复制代码
<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字段

对应如果增加分组:

html 复制代码
<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>

增加多级联动:

html 复制代码
<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>
相关推荐
百锦再2 天前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇2 天前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再4 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code4 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16884 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_4 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj14 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D14 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台