Table 利用 Render 实现复杂绑定

背景

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

实现

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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
)
}
}
]
}
}
}