場景

Vue+ElementUI+axios+SpringBoot前后端分離的后臺管理系統(tǒng)。

將表格中某字段類似于狀態(tài)等需要關(guān)聯(lián)字典表進(jìn)行篩選查詢時。示例如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

首先實現(xiàn)前端頁面下拉框賦值

在頁面上添加一個el-table

????????? <el-form-item label="調(diào)動類別" prop="ddlb"><el-select v-model="queryParams.ddlb" placeholder="請選擇調(diào)動類別" clearable size="small"><el-optionv-for="dict in ddlbOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select>

這里綁定的下拉框的數(shù)據(jù)源是一個ddlbOption這個對象數(shù)組，這是一個請求后臺數(shù)據(jù)返回的鍵值對的數(shù)組。

首先需要聲明這個對象數(shù)組

? data() {return {// 調(diào)動類別字典ddlbOptions: [],

然后在頁面的created函數(shù)中請求后臺獲取字典數(shù)據(jù)，這樣在頁面加載完就能獲取數(shù)據(jù)。

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

調(diào)用的方法getDicts是外部引用的公共方法，能根據(jù)字典類型獲取字典數(shù)據(jù)

// 根據(jù)字典類型查詢字典數(shù)據(jù)信息 export function getDicts(dictType) {return request({url: '/system/dict/data/type/' + dictType,method: 'get'})

請求的后臺url對應(yīng)的接口中

??? /*** 根據(jù)字典類型查詢字典數(shù)據(jù)信息*/@GetMapping(value = "/type/{dictType}")public AjaxResult dictType(@PathVariable String dictType){return AjaxResult.success(dictTypeService.selectDictDataByType(dictType));}

在Controller層調(diào)用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);

對應(yīng)的xml

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

就是對數(shù)據(jù)庫中的字典表根據(jù)type類型進(jìn)行查詢

設(shè)計數(shù)據(jù)庫如下

?

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

請求完字典數(shù)據(jù)并通過

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

給下拉框進(jìn)行賦值后，下面就是對查詢數(shù)據(jù)的格式化顯示。

使用字典的目的就是在數(shù)據(jù)中存儲的是鍵即1,2,3這種數(shù)據(jù)，而在頁面上顯示的是要對應(yīng)的值即中文名 除了可以在后臺進(jìn)行查詢時關(guān)聯(lián)字典表進(jìn)行查詢，直接將查詢結(jié)果返回給前端后。

還可以直接查詢的就是表中存儲的1,2,3這種數(shù)據(jù)，然后返回給前端，由前端進(jìn)行格式化顯示。

來到對應(yīng)的狀態(tài)列

<el-table-column label= "調(diào)動類別" align= "center" prop= "ddlb" :formatter= "ddlbFormat" />

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

??? // 調(diào)動類別字典翻譯ddlbFormat(row, column) {return this.selectDictLabel(this.ddlbOptions, row.ddlb);},

傳遞的row是當(dāng)前行對象，column是當(dāng)前列對象

?return返回的就是當(dāng)前列要顯示的值，這里調(diào)用的是一個方法，傳遞的是上面獲取的字典的數(shù)組和當(dāng)前列的屬性值即1,2,3這種。

調(diào)用的回顯字典數(shù)據(jù)的方法

// 回顯數(shù)據(jù)字典 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(''); }

能將上面查詢的字典的數(shù)組根據(jù)鍵1,2,3回顯值即中文名稱。

這樣在下拉框選擇之后可以通過

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

綁定的值傳遞給后臺，此時后臺獲取的是設(shè)置的value值即1,2,3等。

其中quarmParams是前端聲明的對象，字段與后臺的實體類的屬性項相對應(yīng)

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

查詢按鈕時調(diào)用后臺接口

??? /** 查詢調(diào)動記錄列表 */getList() {listDdjl(this.queryParams).then((response) => {this.ddjlList = response.rows;});},

此時傳遞的參數(shù)就是

this.queryParams

這個就是上面前端聲明的對象，其屬性ddlb已經(jīng)根據(jù)el-table的那列進(jìn)行綁定

<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' // 創(chuàng)建axios實例 const service = axios.create({// axios中請求配置有baseURL選項，表示請求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超時timeout: 10000 }) // request攔截器 service.interceptors.request.use(config => {// 是否需要設(shè)置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改}return config }, error => {console.log(error)Promise.reject(error)< BR> })// 響應(yīng)攔截器 service.interceptors.response.use(res => {// 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)const code = res.data.code || 200;// 獲取錯誤信息const message = errorCode[code] || res.data.msg || errorCode['default']if (code === 401) {MessageBox.confirm('登錄狀態(tài)已過期，您可以繼續(xù)留在該頁面，或者重新登錄','系統(tǒng)提示',{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 的屬性要與前端傳遞的參數(shù)的屬性相對應(yīng)，這樣后臺就能獲取到。

public class KqDdjl extends BaseEntity {private static final long serialVersionUID = 1L;/** id */private Long id;/** 調(diào)動類別 */@Excel(name = "調(diào)動類別")private String ddlb;}

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

Controller層傳遞一直到mapper層

public List<KqDdjl> selectKqDdjlList(KqDdjl kqDdjl);

對應(yīng)的xml方法

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

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

這樣就可以實現(xiàn)根據(jù)篩選的條件查詢出符合條件的數(shù)據(jù)。

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。