iview的表格组件渲染带数组数据报错问题

问题描述：

在我们使用iview的表格组件时，渲染数据时会报错，具体的报错是vue或者iview内部的错误，类似：TypeError: Cannot read property '_ischeck' of null，看这种报错，一看就不是自己文件的报错，而是自己文件那个参数有问题导致源码的报错。

解决问题：

在苦思冥想之后，测试出是后端返回的数据有问题，怀疑是后端返回的数据中包含数组，而且数组的key是children字段，在iview的表格组件中，可能会认为带有children字段的数组是树形表格，户或者要经过特殊处理，后来叫后端把这children特殊字段换一个其他字段代替，就不会报错了

说实话，iview的表格处理的真没elementui的表格组件简单好用，render函数真的扎心，但是用熟练和习惯了灵活度也很高。

下面就总结一下两种渲染数组的方式。

数据类型：

 

第一种：render函数

{
                    title: '包含子类',
                    align: 'center',
                    key: 'it',
                    render: (h, params) => {
                        var str = ''
                        for (var i in params.row.items) {
                            console.log('字符串22', i.chName)
                            str = str + i.chName
                        }
                        console.log('字符串', str)
                        return h('span', {
                            style: {
                                color: 'red'
                            }
                        }, str)
                    }
                },

第二种：slot插槽的方式

{
                    title: '包含子类',
                    align: 'center',
                    slot: 'it'
                },

<Table highlight-row border @on-selection-change="selectChange" :context="self" :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="it">
                    <span v-for="(item, index) in row.items" :key="index">
                        {{item.chName}}
                    </span>
                </template>
            </Table>

我觉得插槽的方式挺好用，比较切合自己的编写习惯。