概述

在使用Vue基于TypeScript開發項目時，使用Element UI的Table來做列表數據的渲染。
在實際的數據中，有一列數據存儲的是字典的 code ，這種設計對于后端的模型設計來說是沒有問題的，我們的數據持久化只需要關注 code 就可以了。
但是前端顯示的過程中，只顯示 code 值，對用戶來說是不友好的。對于用戶來講，他們需要的是可讀的數據，即 code 對應的中文描述。

思路

這種問題通常會有兩種解決方案：

• 后端處理：返回數據集時提前處理     code 值，將其轉換成對應的中文描述
• 前端處理：在渲染表格的過程中，實時的將     code 值轉換為對應的中文描述

在本次示例中，我們采用前端處理的方式。

思路

需要處理的列用的是字典值，先從后端將字典數據獲取過來，在渲染數據的時候，直接使用預加載的字典內容對數據進行轉換。

錯誤的方案

@Component
export default class DictManage extends Vue {
   modules = [];

  constructor() {
    super();
     this.$store.dispatch('dict/fetchModules').then(res => {
       console.log(res);
       this.modules = res;
     }).catch(err => console.error(err));
  }
  
  public covertModule(code): string {
    const module = this.modules.find(it => it.code === code);
    return module ? module.name : code;
  }
}

_在構造函數中將數據加載進來，可以看到控制臺有打印字典內容。但是在 __covertModul_e 中獲取的 modules 卻讀不到值。

正確的方案

對上面的內容進行了改造，如下：

@Component
export default class DictManage extends Vue {
  modules: any[] = [];

  created() {
    this.$store
      .dispatch('dict/fetchModules')
      .then(res => {
        this.modules = [...res];
      })
      .catch(err => console.error(err));
  }

  public covertModule(code): string {
    const module = this.modules.find(it => it.code === code);
    return module ? module.name : code;
  }
}

將預加載的處理遷移到 created() 里面， 此時 covertModule 中可以正常的獲取 modules 值，表格渲染正常。

分析

在TypeScript下開發的Vue組件，屬性變量modules對應著js下的 data() 中的modules，所以在構造函數中對modules進行賦值處理時，modules還沒有創建。在covertModule中使用的modules是后來創建的實例，與構造函數中的不是同一個，所以獲取到的一直是空。