表格数据，后台返回的是数字，所以我们必须得把它转换成相对应的文字，而且要注意的是：我们传给后台的也是数字！！！

手写了个demo：

模拟一下，调用方法前的原图：

数字看着就很懵逼

代码： 

  // 不经过任何操作的el-table

<el-table :data="tableData" @selection-change="handleSelection" >
      <el-table-column type="selection" min-width="100" align="center" />
      <el-table-column prop="userName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="类型"  width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态"  width="180">
      </el-table-column>
      <el-table-column prop="custom" label="喜欢的歌星" width="180">
      </el-table-column>
  </el-table>

修改后：

 代码：

<template>
  <div class="container">
    <el-table :data="tableData" @selection-change="handleSelection" >
      <el-table-column type="selection" min-width="100" align="center" />
      <el-table-column prop="userName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="类型"  width="180">
        <template slot-scope="scope"> 
          {{getLabel(getType,scope.row.type,'dictValue','dictLabel') }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"  width="180">
        <template slot-scope="scope"> 
          {{getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }}
        </template>
      </el-table-column>
      <el-table-column prop="custom" label="喜欢的歌星" width="180">
        <template slot-scope="scope"> 
           {{getLabel(getCustom,scope.row.custom,'value','label') }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {type: '0',userName: '张三',status: '1',custom: '0'},
          {type: '1',userName: '李四',status: '1',custom: '2'},
          {type: '0',userName: '王五',status: '0',custom: '1'},
          {type: '2',userName: '王六',status: '1',custom: '0'},
        ],
        // 模拟数据字典数据，类型数据
        getType: [
          {dictValue: 0,dictLabel:'前端工程师'},
          {dictValue: 1,dictLabel:'Java工程师'},
          {dictValue: 2,dictLabel:'全栈工程师'}
        ],
        // 模拟数据字典数据，状态数据
        getStatus: [
          {dictValue: 0,dictLabel:'上班中'},
          {dictValue: 1,dictLabel:'休假中'}
        ],
        // 模拟自定义接口数据，自定义
        getCustom: [
          {value: 0,label:'周杰伦'},
          {value: 1,label:'李克勤'},
          {value: 2,label:'邓紫棋'}
        ]
      }
    },
    methods: {
      /**
       * 根据传入的值,返回对应的中文name，常用的地方是表格那里
       * list: 传入的源数组
       * id: 传入的值
       * value: 源数组中为了匹配id值的字段名称
       * label: 源数组中需要返回显示中文的字段名称
       * 示例：arr:[{dictValue: 0,dictLabel:'前端工程师'},{dictValue: 1,dictLabel:'Java工程师'}]
       * 调用getLabel(arr, 1, "dictValue", "dictLabel")返回了 Java工程师
       * */
      getLabel(list, id, value, label) {
      	if (id != '' && Array.isArray(list) && list.length != 0){
          return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label]
        } else {
          return id
        }
      },
      // 获取勾选的行对象
      handleSelection(selection) {
        console.log(selection)
      }
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .container {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
  }
</style>

上面是单组件方法的正常写法。

================================================================

下面的是全局写法：

开始封装一下方法：我把js文件放在了src下面的utils目录中的common.js

导出全局其实很简单，原理就是在vue的实例上挂载方法

 就是在方法前面加上export function,然后去到main.js文件中添加以下代码（我增加了一个sum方法是为了更好的让读者理解实例挂载），下面那里看不懂的可以先去看一下：添加实例 property — Vue.js

import {
  getLabel,
  sum
  } from '@/utils/common'
Vue.prototype.$getLabel = getLabel
Vue.prototype.$sum = sum

回到最初的组件那里：

<template>
  <div class="container">
    <el-table :data="tableData" @selection-change="handleSelection" >
      <el-table-column type="selection" min-width="100" align="center" />
      <el-table-column prop="userName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="类型"  width="180">
        <template slot-scope="scope">{{$getLabel(getType,scope.row.type,'dictValue','dictLabel') }}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态"  width="180">
        <template slot-scope="scope">{{$getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }}</template>
      </el-table-column>
      <el-table-column prop="custom" label="喜欢的歌星" width="180">
        <template slot-scope="scope">{{$getLabel(getCustom,scope.row.custom,'value','label') }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {type: '0',userName: '张三',status: '1',custom: '0'},
          {type: '1',userName: '李四',status: '1',custom: '2'},
          {type: '0',userName: '王五',status: '0',custom: '1'},
          {type: '2',userName: '王六',status: '1',custom: '0'},
        ],
        // 模拟数据字典数据，类型数据
        getType: [
          {dictValue: 0,dictLabel:'前端工程师'},
          {dictValue: 1,dictLabel:'Java工程师'},
          {dictValue: 2,dictLabel:'全栈工程师'}
        ],
        // 模拟数据字典数据，状态数据
        getStatus: [
          {dictValue: 0,dictLabel:'上班中'},
          {dictValue: 1,dictLabel:'休假中'}
        ],
        // 模拟自定义接口数据，自定义
        getCustom: [
          {value: 0,label:'周杰伦'},
          {value: 1,label:'李克勤'},
          {value: 2,label:'邓紫棋'}
        ]
      }
    },
    methods: {
       // 本组件的sum是乘法
      sum(a,b){
        return a * b
      },
      // 获取勾选的行对象
      handleSelection(selection) {
        console.log(selection)
      }
    },
    created() {
      console.log(this.$sum(5,10),'调用了公共方法sum')
      console.log(this.sum(5,10),'调用了本组件方法sum')
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .container {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
  }
</style>

效果图：

 说明我们挂载实例成功了，成功的把方法全局使用，也就是挂载在了实例之中

主要变动：

 那我们全局都可以使用这个方法了，那就很方便了啊，我们的代码就能变得更加的整洁了，少了一大堆重复的代码。

今天又是充满希望的一天