在Vue中使用ElementUi表格,对数据进行格式化处理
1、后端给我返回的格式如下,我要根据他提供的数据,将其转变为文字:
在这里插入图片描述
2、我们可以在需要处理行里,加入:formatter方法,具体代码如下:

      <el-table-column prop="protocolType" label="协议类型" :formatter="formatProtocolType" >
      </el-table-column>

3、在js中进行格式处理
既可以使用if判断,也可使用switch case判断,亦或使用三元表达式

  • switch case:
  // 处理协议类型
    formatProtocolType(row) {
      let type = row.protocolType;
      switch (type) {
        case 1:
          type = "普通";
          break;
        case 2:
          type = "移动NB协议";
          break;
        case 3:
          type = "LORA";
          break;
        case 4:
          type = "电信NB协议";
          break;
        case 5:
          type = "loraWan";
          break;
        case 9:
          type = "其他";
          break;
      }

      return type;
    },
  • 三元表达式
    // 处理通信状态
    formatCommunicationStatus(row) {
      let type = row.communicationStatus;
      return type == 1 ? "正常" : "离线";
    },
  • if判断
    // 集中器类型
    formatType(row) {
      let type = row.type;
      if (type == "") {
        type = "";
      } else if (type == "1") {
        type = "虚拟";
      } else if (type == "2") {
        type = "真实";
      }
      return type;
    },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐