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

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

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

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

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

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

在 render 函数中,我们需要返回一个 h 函数的实例,这个 h 函数其实是渲染函数,你只需要返回对应的数据即可。

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

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

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

发表评论