vue项目中针对table表格数据进行映射

liuxuanwei1998

于 2024-09-09 14:09:59 发布

阅读量340

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/liuxuanwei1998/article/details/142057533

版权

后端返回的数据常是0 1 2 3之类的，需要根据字典去映射成相应的数据。

主要使用filters来进行映射

示例：

<el-table
      class="tab"
      :data="list"
      style="width: 100%"
      :row-style="{ height: '0' }"
      :cell-style="{ padding: ' 7px 0px' }"
      v-if="list.length != 0"
    >
      <el-table-column
        align="center"
        label="序号"
        width="100"
        prop="loggerId"
      />

      <el-table-column prop="loggerTime" label="时间" sortable width="260">
      </el-table-column>
      <el-table-column label="日志内容" prop="loggerMsg"> </el-table-column>
      <el-table-column label="日志级别" width="260">
        <template mplate slot-scope="scope">{{
          scope.row.loggerLevel | levestate
        }}</template>
      </el-table-column>
    </el-table>

日志级别中1代表INFO,2代表WARN

所以可以通过如下方法将1 2 转换，其中filters为过滤器，跟vue中的data,methods同级。

filters: {
    levestate(val) {
      let str = ''
      switch (val) {
        case 0:
          str = 'DEBUG'
          break
        case 1:
          str = 'INFO'
          break
        case 2:
          str = 'WARN'
          break
        case 3:
          str = 'FATAL'
          break
        default:
          str = val
      }
      return str
    }
}