element el-table字典转换

由于之前百度了下转换太麻烦了每个需要转换的字段都要专门写个fomatter方法转换所以后面看看formatter能不能传参数写成通用方法，其他就不用说了都是官方有的属性，就是这个dictChange是我写的通用字典，通过字典名称和属性名进行转换

<el-table-column
        prop="editable"
        header-align="center"
        :formatter="(row, column) => dictChange(row, column, 'yesNoOptions')"
        align="center"
        sortable="custom"
        label="是否可修改">
</el-table-column>

dictChange方法

import dict from '@/utils/dict-util'

const dictChange = function (data, element, dictName) {
  const col = element.property
  const dictArr = dict[dictName]
  if (!dictArr) return
  for (let item of dictArr) {
    if (item.code === data[col]) {
      return item.name
    }
  }
}
export default dictChange

我将方法注册到main.js中以通用了

然后是其中的字典dict-util

const dict = {
  yesNoOptions: [
    {name: '是', code: 1},
    {name: '否', code: 0}
  ]
}
export default dict

这样以后新增字典可以在通同一个地方，而且全局通用，只要写上字典名称即可，当然后面我会在后端加个redis缓存接口实现这样我们只需要在后台管理系统中管理即可。

实现效果