EleemntUI中el-table的formatter格式化字典顯示的使用

場景

某些類似於用字典(鍵值對)存儲的屬性，比如操作員這種

1代表用戶id 數組庫存儲的也是用戶id，但是在頁面上展示的是用戶姓名

數據庫中存儲czy是數字即用戶的id

 

 

而要在頁面上展示的是用戶姓名

 

 

注：

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

實現

一般這種都是在后台寫sql語句時使用關聯語句關聯查詢用戶表將用戶姓名查詢出來。

但是這只是用戶id和姓名的鍵值對的映射。

如果是類似於狀態等這樣的鍵值對映射的話除了在后台進行關聯表進行查詢，還可以在前端使用el-table的

formatter進行格式化顯示。

首先在頁面上添加操作員此列

    <el-table v-loading="loading" :data="bcbdlsList" @selection-change="handleSelectionChange">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="操作員" align="center" prop="czy" :formatter="czyFormat" />

    </el-table>

然后給此列設置一個formatter

:formatter= "czyFormat"

在對應的格式化方法中

    // 操作員字典翻譯
    czyFormat(row, column) {
      var name = "";
      this.czyOptions.forEach(function (item, index) {
        if (row.czy == item.userId) {
          name = item.userName;
        }
      });
      return name;
    },

上面的代碼就是傳遞兩個參數row是行參數，column是列參數

然后this.czyOption是一個根據用戶id和姓名的一個映射的對象數組，遍歷這個數組

根據row.czy獲取當前行存儲的用戶id，即1或者2這種，在循環中判斷如果與鍵值對中的用戶id屬性相等則獲取用戶的姓名並將其返回。

那么在哪里查詢這個鍵值對映射的數組的數據？

首先聲明這個字典數組

  data() {
    return {
      // 操作員字典
      czyOptions: [],

然后在created中請求后台數據獲取用戶列表，這樣在頁面加載完就能獲取到用戶對象的list

  created() {
    this.getUserList();
}

在獲取數據的方法中

    /** 獲取操作員數據 */
    getUserList() {
      //獲取操作員數據
      listUser(this.user).then((response) => {
        this.czyOptions = response.rows;
      });
    },

 

將后台查詢出來的數據賦值給上面的czyOptions 。