关于vue表格格式化显示的方法

关于vue表格格式化显示的方法

应用场景

当用户需要将表格某一列数据格式化后展示，又不想改变原数据时。如0表示男、1表示女。因为原数据是0和1，为了更直观的展示给用户，在表格显示时，0显示为男，1显示为女。

本文以ElementUI框架为例：

方法一

当引用框架有格式化属性时，直接使用该属性来格式化内容

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="sex" label="性别(未格式化)" width="180" />
    <el-table-column prop="sex" label="性别(格式化后)" width="180" :formatter="formatterSex" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          sex: 0,
          address: "上海市普陀区XX路 1518 弄",
        },
        {
          name: "小丽",
          sex: 1,
          address: "上海市普陀区XX路 1519 弄",
        },
        {
          name: "小红",
          sex: 1,
          address: "上海市普陀区XXX路 1520 弄",
        },
        {
          name: "李四",
          sex: 0,
          address: "上海市普陀区XXX路 1521 弄",
        }
      ]
    }
  },
  methods: {
    // 表格格式化Function(row, column, cellValue, index)
    formatterSex(row) {
      if (row.sex === 0) {
        return '男'
      }
      if (row.sex === 1) {
        return '女'
      }
      return row.sex
    }
  }
}
</script>

效果展示：

方法二

当框架没有格式化属性时，可以在列标签内加一个包装元素template ，自己做格式化：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="sex" label="性别(未格式化)" width="180" />
    <el-table-column prop="sex" label="性别(格式化后)" width="180">
      <template slot-scope="scope">{{ formatterSex(scope.row) }}</template>
    </el-table-column>
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          sex: 0,
          address: "上海市普陀区XX路 1518 弄",
        },
        {
          name: "小丽",
          sex: 1,
          address: "上海市普陀区XX路 1519 弄",
        },
        {
          name: "小红",
          sex: 1,
          address: "上海市普陀区XXX路 1520 弄",
        },
        {
          name: "李四",
          sex: 0,
          address: "上海市普陀区XXX路 1521 弄",
        }
      ]
    }
  },
  methods: {
    // 表格格式化Function(row, column, cellValue, index)
    formatterSex(row) {
      if (row.sex === 0) {
        return '男'
      }
      if (row.sex === 1) {
        return '女'
      }
      return row.sex
    }
  }
}
</script>

效果展示：

该方法算是万能的，不管有没有格式化属性，都可以使用这个方法格式化内容。