el-table 中使用formatter格式化数据

使用formatter与v-if实现数据格式化

最新推荐文章于 2025-09-17 16:34:01 发布

原创最新推荐文章于 2025-09-17 16:34:01 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

formatter这个属性来对传入的数据进行用户自定义的格式化。（比如后台给你返0或1，你需要展示成男”和“女”）

1.项目表格中使用formatter

<el-table-column label="项目类型" :formatter="formatterType" prop="type"></el-table-column>

methods: {
  formatterType(row){
    switch(row.type){
      case '1':
        return '名称1'
      case '2':
        return '名称2'
      default:
        return '名称3'
    }
  }
},

2.使用v-if做判断

<el-table-column label="项目类型"  prop="type">
  <template slot-scope="scope">
          <span>
            <span v-if="scope.row.type === '1'">名称1</span>
            <span v-if="scope.row.type === '2'">名称2</span>
          </span>
  </template>
</el-table-column>