場景

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

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 。