Vue iView组件表格 render函数的使用方法详解

什么是 render 函数

在 Vue 中，render 函数是用来生成虚拟 DOM 的函数，它可以根据数据生成对应的 HTML 结构，并最终生成真实的 DOM 节点。

为什么需要 render 函数

在使用 iView 表格组件时，我们需要通过传入 columns、data 等参数来生成表格的列和行。但是，当我们想要定制表格某一列的显示效果时，传入的参数已经不能满足我们的需求了。这时就需要通过 render 函数来实现。

使用 render 函数

1. 最基础的使用方法

render 函数接收一个参数，即 createElement 函数，这个函数用来创建虚拟 DOM。我们可以使用这个函数来创建所需的 DOM 元素。

下面是一个最基础的用 render 函数生成表格的示例：

<template>
  <Table :columns="columns" :data="data"></Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        }
      ],
      data: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  },
  render: function(createElement) {
    return createElement('div', 'Hello World!')
  }
}
</script>

在上面的示例中，我们将 Table 组件放在模板中，然后在 JavaScript 中生成一个 div 元素，最后返回这个元素。

2. 使用 render 函数自定义表格列的内容

在 iView 中，我们可以通过 render 函数来自定义表格列的内容。在下面的示例中，我们使用了一个 render 函数来自定义表格中姓名列的显示效果：

<template>
  <Table :columns="columns" :data="data"></Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name',
          render: (h, params) => {
            return h('span', '姓名：' + params.row.name)
          }
        },
        {
          title: '年龄',
          key: 'age'
        }
      ],
      data: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  }
}
</script>

在上面的示例中，我们在姓名列中定义了一个 render 函数。这个函数接收两个参数，一个是 createElement 函数，另一个是一个包含当前列数据的参数对象。在这个函数中，我们使用 createElement 函数创建一个 span 元素，并在这个元素中显示姓名前缀和当前行的 name 数据。

3. 使用 render 函数自定义表格列的操作按钮

在 iView 中，我们可以通过 render 函数来自定义操作列的按钮。在下面的示例中，我们使用了一个 render 函数来自定义表格中的操作按钮：

<template>
  <Table :columns="columns" :data="data"></Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '操作',
          key: 'operation',
          width: 180,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {type: 'primary', size: 'small'},
                  on: {
                    click: () => {
                      this.editUserInfo(params.index)
                    }
                  }
                },
                '编辑'
              ),
              h('Button', {
                props: {type: 'error', size: 'small'},
                style: {marginLeft: '5px'},
                on: {
                  click: () => {
                    this.deleteUserInfo(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  },
  methods: {
    editUserInfo(index) {
      console.log('编辑第' + (index + 1) + '行数据')
    },
    deleteUserInfo(index) {
      console.log('删除第' + (index + 1) + '行数据')
    }
  }
}
</script>

在上面的示例中，我们在操作列中定义了一个 render 函数。在这个函数中，我们使用 createElement 函数创建了两个按钮元素，并给这两个按钮分别绑定了编辑和删除事件。当点击这两个按钮时，会分别触发 editUserInfo 和 deleteUserInfo 方法。