Vue数据渲染技巧：从三种方式看后端数据的灵活处理

方式一：

      <el-table-column 
        prop="tagType" 
        label="标签类型" 
        width="120"
        :formatter="tagTypeFormatter">
      </el-table-column>

tagTypeFormatter(row) {
      let tagType = row.tagType;
      if (tagType === '0') {
        return '情况1';
      } else if (tagType === '1') {
        return '情况2';
      }
    }

 方式二：

<el-table-column prop="type" label="类型" align="center">
    <template v-slot="{ row }">
        <span v-show="row.type == 1">普通用户</span>
        <span v-show="row.type == 2">管理员</span>
        <span v-show="row.type == 3">项目经理</span>
    </template>
</el-table-column>

方式三：

      <el-table-column prop="tagClass" label="标签分类" width="120">
        <template slot-scope="scope">
          <span>{{ classFormat(scope.row.tagClass, getTagClass) }}</span>
        </template>
      </el-table-column>

      getTagClass: [
        { dictValue: '01', dictLabel: '政策因素' },
        { dictValue: '02', dictLabel: '用电行为因素' },
        { dictValue: '03', dictLabel: '线损状态' },
        { dictValue: '04', dictLabel: '技术因素' },
        { dictValue: '05', dictLabel: '运行指标因素' },
        { dictValue: '06', dictLabel: '客户服务' },
        { dictValue: '07', dictLabel: '台区设备' },
        { dictValue: '08', dictLabel: '地理环境' }
      ]

    classFormat(row, obj) {
      let filter = obj.filter(res => res.dictValue === row);
      return filter[0]?.dictLabel;
    },