# 在 Vue 中使用 Render 函数来进行结果的格式化

- Link: https://www.ixiqin.com/2019/02/25/used-in-the-vue-render-function-for-the-format-of-the-result/
- Published: 2019-02-25T18:15:45+08:00
- Author: 白宦成

在 Vue 中，想要对数据进行格式化有很多种方式，比如，使用 filter 并搭配上 管道符`|`
来进行格式转化。或者使用 `computed` 方法进行数据格式的转化。

这篇文章分享一下我是如何使用 Render 函数来进行结果的格式化的。

目前的需求是这样的，我从服务器获取到的数据需要渲染到 Table 组件中，由于数据的渲染
形式受到多组参数影响，因此，我决定使用 render 函数来进行处理。

根据 iView 文档的说明，我们可以在 data 中传入一个 render 函数，来进行 render 处理，
因此，我们可以这样设定数据

    ```javascript
    let data = [{
              title: "生日",
              key: "birthday",
              render: (h, params) => {
                // here is my render function
              }
            },]
    Code language: JavaScript (javascript)
    ```

在 render 函数中，我们需要返回一个 `h` 函数的实例，这个 `h` 函数其实是[渲染函数](https://cn.vuejs.org/v2/guide/render-function.html)，
你只需要返回对应的数据即可。

我们在初始化时，传递了两个参数，其中第一个参数是渲染函数，第二个参数则是当前的数据。
其中包括如下信息

![](https://postimg.aliavv.com/201810/8o2t7.jpg)

index 是当前数据的顺序；row 是当前行的数据，column 则是当前列的数据。你可以通过 `
params.row.xxx` 来获取其他字段的数据，来进行组合数据的判断。

比如`(params.row.a + params.row.b)=== params.row.c`。