Table 利用 Render 实现复杂绑定

背景

做 Sina_ip 库的项目，用的 iView 组件库。
在详细信息展示时，用到了 iView 的 Table 组件。我发现列绑定在数组中的数据时，一维数组的数据可以直接用 key 指向，可是遇到二维数组时，无法指向二维数组下的某个键。
这时用到了 Vue 的 render 函数，直接构造一个 ，把数据放在其中就可以了。

实现

iView Table 组件利用 Render 实现 Columns 绑定二维数组键

<template>
  <div>
    <Input></Input>
    <Button @click="toQuery">Query</Button>
    <Table border :columns="columns" :data="ipResultList"></Table>
  </div>
</template>
<script>
export default {
  name: 'Query',
  data () {
    return {
      ipResultList: [],
      columns: [
        {
          title: 'ip',
          key: 'ip'
        },
        {
          title: 'iplong',
          key: 'iplong'
        },
        {
          title: 'start_ip',
          key: 'ipdb_info',
          render: (createElement, params) => {
            return createElement(
              'span', params.row.ipdb_info.start_ip
            )
          }
        }
      ]
    } 
  }
}