Web前端-el-table-column表格匹配字典数据

最近初步学习Vue开发web前端的table表格时，想通过字典中数据进行匹配展示，如下

<el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange">

   <el-table-column type="selection" width="55" align="center" />

      <!--类型匹配转换-->
      <el-table-column label="类型" align="center" prop="type">
           <template slot-scope="scope">
              {{getChangeType(scope.row.type)}}<!--调用getChangeType方法-->
           </template>
      </el-table-column>

</el-table>

数据字典如下：

data() {
   return {
        typeList: [{
          dictValue: '1',
          dictLabel: '小明'
        }, {
          dictValue: '2',
          dictLabel: '小红'
        }, {
          dictValue: '3',
          dictLabel: '小绿'
        }],
   }
},

下面就说自己解决的方法

data() {
   return {
        typeList: [{
          dictValue: '1',
          dictLabel: '小明'
        }, {
          dictValue: '2',
          dictLabel: '小红'
        }, {
          dictValue: '3',
          dictLabel: '小绿'
        }],
   }
},
    

methods: {
	//1、使用插槽（推荐）
    getChangeType(e) {
      for (var i = 0; i < this.typeList.length; i++) {
        if (this.typeList[i].dictValue == e) { //dictValue，dictLabel保持和上面定义一致
          return this.typeList[i].dictLabel;
        }
      }
    },

    //2、使用:formatter
    typeFormatter: function(row, column) {
        return row.type == 1
                    ? "小明"
               : row.type == 2
                    ? "小红"
               : row.type == 3 
                    ? "小绿" : "无名？";
		}
	}
	//也可以用switch
	typeFormatter: function(row, column) {
      switch (row.type) {
        case "1":
          return "小明";
          break;
        case "2":
          return "小红";
          break;
        case "3":
          return "小绿";
          break;
    }
}