概述

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

思路

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

• 后端處理：返回數(shù)據(jù)集時提前處理     code 值，將其轉(zhuǎn)換成對應(yīng)的中文描述
• 前端處理：在渲染表格的過程中，實時的將     code 值轉(zhuǎn)換為對應(yīng)的中文描述

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

思路

需要處理的列用的是字典值，先從后端將字典數(shù)據(jù)獲取過來，在渲染數(shù)據(jù)的時候，直接使用預(yù)加載的字典內(nèi)容對數(shù)據(jù)進(jìn)行轉(zhuǎn)換。

錯誤的方案

@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;
 }
}

_在構(gòu)造函數(shù)中將數(shù)據(jù)加載進(jìn)來，可以看到控制臺有打印字典內(nèi)容。但是在 __covertModul_e 中獲取的 modules 卻讀不到值。

正確的方案

對上面的內(nèi)容進(jìn)行了改造，如下：

@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;
 }
}

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

分析

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