場景

Vue+ElementUI+axios+SpringBoot前后端分離的后臺管理系統。

將表格中某字段類似于狀態等需要關聯字典表進行篩選查詢時。示例如下

?

注：

博客：
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-optionv-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類型進行查詢

設計數據庫如下

?

其中dict_lable作為值，dict_value作為鍵，dict_type相同作為一組，是類型的標志字段。

請求完字典數據并通過

????????????? <el-optionv-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 => {// 是否需要設置 tokenconst isToken = (config.headers || {}).isToken === falseif (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方法

??? <select id="selectKqDdjlList" parameterType="KqDdjl" resultMap="KqDdjlResult"><include refid="selectKqDdjlVo"/><where>?<if test="ddlb != null? and ddlb != ''"> and ddlb = #{ddlb}</if></where></select>

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

這樣就可以實現根據篩選的條件查詢出符合條件的數據。

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。