详解el-table-columnformatter

小蓝 • 2024-11-26 12:19 • 编程

一、针对el-table-columnformatter的定义

在Element UI的表格（el-table）组件中，应用到每一个列的数据格式化方法就是el-table-columnformatter。我们可以通过这个方法，自定义表格中每一列的数据格式，比如为数字添加单位或者将日期格式化等。

二、使用示例

为了更好地理解el-table-columnformatter的作用，我们可以通过以下代码展示一个简单的表格，其中定义了两个表格列（username和age）：

<el-table :data="tableData">
  <el-table-column label="username" prop="username"></el-table-column>
  <el-table-column label="age" prop="age"></el-table-column>
</el-table>

假设我们希望给“age”列的数字数据添加“岁”单位，我们可以通过el-table-columnformatter方法轻松实现，代码如下：

<el-table :data="tableData">
  <el-table-column label="username" prop="username"></el-table-column>
  <el-table-column label="age" prop="age" :formatter="formatAge"></el-table-column>
</el-table>

可以看到，在第二个el-table-column标签中，我们添加了formatter属性，并将它绑定到了一个名为“formatAge”的函数。

接下来，我们需要在Vue实例中定义formatAge方法：

export default {
  name: 'Demo',
  data () {
    return {
      tableData: [
        { username: '小明', age: 22 },
        { username: '小红', age: 23 },
        { username: '小绿', age: 24 },
        { username: '小紫', age: 25 }
      ]
    }
  },
  methods: {
    formatAge (row, column, cellValue, index) {
      return cellValue + '岁';
    }
  }
}

在这个方法中，我们接收了4个参数：行数据（row）、列数据（column）、单元格数据（cellValue）和索引（index）。在这段代码中，我们简单地拼接了一个字符串，并将其返回作为该单元格的数据格式。

三、支持的格式化函数

除了字符串拼接之外，Element UI还提供了一些内置的格式化函数，可以实现更高级的数据格式化。以下是一些内置的格式化函数：

1、toFixed(num)

返回一个保留固定位数小数的字符串。

export default {
  name: 'Demo',
  data () {
    return {
      tableData: [
        { username: '小明', age: 22.456789 },
        { username: '小红', age: 23.123456 },
        { username: '小绿', age: 24.987654 },
        { username: '小紫', age: 25.555555 }
      ]
    }
  },
  methods: {
    formatAge (row, column, cellValue, index) {
      return cellValue.toFixed(2) + '岁';
    }
  }
}

2、toPercentage(num, fixed)

将数字转换为百分比格式。

export default {
  name: 'Demo',
  data () {
    return {
      tableData: [
        { username: '小明', score: 0.75 },
        { username: '小红', score: 0.89 },
        { username: '小绿', score: 0.67 },
        { username: '小紫', score: 0.93 }
      ]
    }
  },
  methods: {
    formatScore (row, column, cellValue, index) {
      return (cellValue * 100).toFixed(2) + '%';
    }
  }
}

3、toDate(date, format)

将日期值格式化为特定格式的字符串。format参数是可选的，默认为“yyyy-MM-dd HH:mm:ss”。

export default {
  name: 'Demo',
  data () {
    return {
      tableData: [
        { username: '小明', birthday: '1998-01-01' },
        { username: '小红', birthday: '1999-02-02' },
        { username: '小绿', birthday: '2000-03-03' },
        { username: '小紫', birthday: '2001-04-04' }
      ]
    }
  },
  methods: {
    formatBirthday (row, column, cellValue, index) {
      return this.$moment(cellValue).format('YYYY年MM月DD日');
    }
  }
}

四、总结

通过对el-table-columnformatter的详解，我们了解都了它是什么、如何使用以及内置的一些格式化函数。在实际应用中，el-table-columnformatter可以帮助我们轻松地自定义表格中每一列的数据格式，让表格内容更加友好和易读。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185523.html