VUE实现对el-table-column数据内容格式化处理

VUE table column数据格式化

案例一：更改数据格式；将后端返回的状态码更改成状态码对应的描述：文字描述

// html部分
 <el-table-column
        label="所属公司"
         prop="group"
        :formatter="groupFormate"
></el-table-column>
// js部分
  groupFormate(row) {
      switch (row.group) {
        case "0000":
          return "A公司";
        case "0001":
          return "B公司";
        case "0002":
          return "C公司";
        case "0003":
          return "D公司";
        case "0004":
          return "E公司";
        case "0005":
          return "F公司";
        case "0006":
          return "G公司";
        default:
          break;
      }
    },

用用场景：
vue后台项目，展示列表页面中有一列数据后端返回的是少许的状态码格式，这个时候我们需要根据不同的状态码对应的公司名称展示在列表中；

案例二：列表内容过长超出部分省略号代替

// html部分
 <el-table-column
        prop="merchantProfile"
        label="用户简介"
        show-overflow-tooltip
        :formatter="contentFormatter"
></el-table-column>


 // js部分
contentFormatter(row, column, cellValue, index) {
// 内容为空时显示的内容
      if (cellValue == "") {
        cellValue = "无商户简介";
      }
      return cellValue.length > 30 ? cellValue.slice(0, 30) + "..." : cellValue;
 },