ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示

雨点打透心脏的1/2处 2023-10-06 14:23 13阅读 0赞

## 场景 ##

Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统。

将表格中某字段类似于状态等需要关联字典表进行筛选查询时。示例如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

首先实现前端页面下拉框赋值

在页面上添加一个el-table

<el-form-item label="调动类别" prop="ddlb">
                <el-select v-model="queryParams.ddlb" placeholder="请选择调动类别" clearable size="small">
                  <el-option
                    v-for="dict in ddlbOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>

这里绑定的下拉框的数据源是一个ddlbOption这个对象数组，这是一个请求后台数据返回的键值对的数组。

首先需要声明这个对象数组

data() {
        return {
          // 调动类别字典
          ddlbOptions: [],

然后在页面的created函数中请求后台获取字典数据，这样在页面加载完就能获取数据。

created() {
        this.getDicts("kq_ddlx").then((response) => {
      },

调用的方法getDicts是外部引用的公共方法，能根据字典类型获取字典数据

// 根据字典类型查询字典数据信息
    export function getDicts(dictType) {
      return request({
        url: '/system/dict/data/type/' + dictType,
        method: 'get'
      })

请求的后台url对应的接口中

/**
         * 根据字典类型查询字典数据信息
         */
        @GetMapping(value = "/type/{dictType}")
        public AjaxResult dictType(@PathVariable String dictType)
        {
            return AjaxResult.success(dictTypeService.selectDictDataByType(dictType));
        }

在Controller层调用servive

public List<SysDictData> selectDictDataByType(String dictType);

在ServiceImpl

public List<SysDictData> selectDictDataByType(String dictType)
        {
            List<SysDictData> dictDatas = DictUtils.getDictCache(dictType);
            if (StringUtils.isNotNull(dictDatas))
            {
                return dictDatas;
            }
            dictDatas = dictDataMapper.selectDictDataByType(dictType);
            if (StringUtils.isNotNull(dictDatas))
            {
                DictUtils.setDictCache(dictType, dictDatas);
                return dictDatas;
            }
            return null;
        }

到mapper层

public List<SysDictData> selectDictDataByType(String dictType);

对应的xml

<select id="selectDictDataByType" parameterType="SysDictData" resultMap="SysDictDataResult">
      <include refid="selectDictDataVo"/>
      where status = '0' and dict_type = #{dictType} order by dict_sort asc
     </select>

就是对数据库中的字典表根据type类型进行查询

设计数据库如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

其中dict\_lable作为值，dict\_value作为键，dict\_type相同作为一组，是类型的标志字段。

请求完字典数据并通过

<el-option
                    v-for="dict in ddlbOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />

给下拉框进行赋值后，下面就是对查询数据的格式化显示。

使用字典的目的就是在数据中存储的是键即1,2,3这种数据，而在页面上显示的是要对应的值即中文名 除了可以在后台进行查询时关联字典表进行查询，直接将查询结果返回给前端后。

还可以直接查询的就是表中存储的1,2,3这种数据，然后返回给前端，由前端进行格式化显示。

来到对应的状态列

<el-table-column label= "调动类别" align= "center" prop= "ddlb" :formatter= "ddlbFormat" />

添加格式化属性和方法，在格式化方法中

// 调动类别字典翻译
        ddlbFormat(row, column) {
          return this.selectDictLabel(this.ddlbOptions, row.ddlb);
        },

传递的row是当前行对象，column是当前列对象

return返回的就是当前列要显示的值，这里调用的是一个方法，传递的是上面获取的字典的数组和当前列的属性值即1,2,3这种。

调用的回显字典数据的方法

// 回显数据字典
    export function selectDictLabel(datas, value) {
     var actions = [];
     Object.keys(datas).map((key) => {
      if (datas[key].dictValue == ('' + value)) {
       actions.push(datas[key].dictLabel);
       return false;
      }
     })
     return actions.join('');
    }

能将上面查询的字典的数组根据键1,2,3回显值即中文名称。

这样在下拉框选择之后可以通过

<el-select v-model= "queryParams.ddlb"

绑定的值传递给后台，此时后台获取的是设置的value值即1,2,3等。

其中quarmParams是前端声明的对象，字段与后台的实体类的属性项相对应

queryParams: {
            pageNum: 1,
            pageSize: 10,
            gh: undefined,
            xm: undefined,
            ddlb: undefined,
            ddsj: undefined,
            kssj: undefined,
            jssj: undefined,
            sfclwc: undefined,
            bmids: undefined,
          },

查询按钮时调用后台接口

/** 查询调动记录列表 */
        getList() {
          listDdjl(this.queryParams).then((response) => {
            this.ddjlList = response.rows;
          });
        },

此时传递的参数就是

this.queryParams

这个就是上面前端声明的对象，其属性ddlb已经根据el-table的那列进行绑定

<el-select v-model= "queryParams.ddlb"

通过listDdjl请求后台

export function listDdjl(query) {
      return request({
        url: '/kqgl/ddjl/getListBySx',
        method: 'post',
        data: query
      })
    
    }

其中request是封装axios的请求对象

import axios from 'axios'
    import { Notification, MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    import errorCode from '@/utils/errorCode'< /A>
    
    
    axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
    const service = axios.create({
      // axios中请求配置有baseURL选项，表示请求URL公共部分
      baseURL: process.env.VUE_APP_BASE_API,
      // 超时
      timeout: 10000
    })
    // request拦截器
    service.interceptors.request.use(config => {
      // 是否需要设置 token
      const isToken = (config.headers || {}).isToken === false
      if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
        console.log(error)
        Promise.reject(error)< BR> })
    
    
    // 响应拦截器
    service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const message = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
          MessageBox.confirm(
            '登录状态已过期，您可以继续留在该页面，或者重新登录',
            '系统提示',
            {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          })
        } else if (code === 500) {
          Message({
            message: message,
            type: 'error'
          })
          return Promise.reject(new Error(message))
        } else if (code !== 200) {
          Notification.error({
            title: message
          })
          return Promise.reject('error')
        } else {
          return res.data
        }
      },
      error => {
        console.log('err' + error)
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    
     )
    
    
    export default service

传递到后台接口

@GetMapping("/list")
        public TableDataInfo list(KqDdjl kqDdjl)
        {
            startPage();
            List<KqDdjl> list = kqDdjlService.selectKqDdjlList(kqDdjl);
            return getDataTable(list);
        }

此时的实体类KqDdjl 的属性要与前端传递的参数的属性相对应，这样后台就能获取到。

public class KqDdjl extends BaseEntity
    {
        private static final long serialVersionUID = 1L;
    
    
        /** id */
        private Long id;
    
    
        /** 调动类别 */
        @Excel(name = "调动类别")
        private String ddlb;
    
    
    }

省略其他属性和get和set方法。

Controller层传递一直到mapper层

public List<KqDdjl> selectKqDdjlList(KqDdjl kqDdjl);

对应的xml方法

省略其他属性字段和映射等。

这样就可以实现根据筛选的条件查询出符合条件的数据。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200806174804571.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020080617492479.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70