spring boot 字典使用，使用element-ui + vue

最新推荐文章于 2025-02-11 15:06:06 发布

原创

最新推荐文章于 2025-02-11 15:06:06 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #后端 #java

本文介绍了如何在Vue应用中结合Element-UI，使用axios异步获取数据，设计数据库表单，特别是针对字典类型的表单设计，如维修工和故障码的下拉选择，并展示了前后端交互和服务接口的实现方法。

数据库表设计

type为1则代表字典的类型

type为2则是下拉框显示的值

id是雪花算法自动生成的

前端设计

基于vue-fast2设计

使用element-ui

异步获取数据

// 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/dict/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'name': this.dataForm.name
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      getChildDataList (code) {
        this.childDataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/dict/childList'),