詳解el-table-columnformatter

一、針對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可以幫助我們輕鬆地自定義表格中每一列的數據格式，讓表格內容更加友好和易讀。