【Vue】el-table-column 后台传过来的数字怎么转换成对应的内容

• Z时代
• 2024-01-10
• 分类：技术分享

后台传过来的 故障类型 是 0 1 2 3 这样子的

我想在前面给它一个对应的内容 ，如果传过来 0 前边展示 碰撞 传过来1 前边展示 事故。
请教下大佬怎么写 我这样写不对。。

      <el-table-column
prop="alarmType"
label="故障类型"
valueMap="{0:'碰撞',1: '事故'}"
>
</el-table-column>

回答

可以用formatter
例如element-ui官方文档上的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

我在拿到数组前给字段加了个判断 emmmmm

以上是 【Vue】el-table-column 后台传过来的数字怎么转换成对应的内容 的全部内容， 来源链接： utcz.com/a/76600.html