ElementUI中el-sellect請求springboot后台數據顯示下拉項並在el-table中格式化顯示

場景

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-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類型進行查詢

設計數據庫如下

 

 

其中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)
  }< BR> )

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>

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

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