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

1. <el-table-column 
2. prop="tagType"
3. label="标签类型"
4. width="120"
5. :formatter="tagTypeFormatter">
6. </el-table-column>

1. tagTypeFormatter(row) {
2. let tagType = row.tagType;
3. if (tagType === '0') {
4. return '情况1';
5.       } else if (tagType === '1') {
6. return '情况2';
7.       }
8.     }

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

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

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

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