iview 使用render实现 树形表格

之前全是用的富文本编辑器。引用代码块看着不习惯，现在终于改成了markown了，可喜可贺，可喜可贺
最近老是在写前端，用的是vue，iview框架，发现很多的功能都没有现成的，只有自己来写一些实现，比如tree-table , select-table 这种组合组件，才发现，render真的是很强大，但是真的又很不好用。
现在是有需求，数据格式是树形，但是要求表格展示，于是我把实现方法在这里写一下：
首先，我们需要一个普通的table

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

普通的table，[https://www.iviewui.com/components/table] 各项属性都在上面，可以方便查看，那怎么实现tree的格式呢？
我们知道，tree格式一般都有一个children属性，里面装的是子节点，那么我们的树形表格的重点就是要在表格中把children中的节点也用table格式展示出来，最重要的当然就是columns属性了，我们table要展示，需要columns属性，我们先随便设置一个：

            colums:[ 
                  {
                        title: '序号',
                        key: 'id'
                    },{
                        title: '名称',
                        key: 'name'
                    }, {
                        title: '详情',
                        key: 'note'
                    }]

这个对我们树形表格无关紧要，现在我们需要使用render来修改一下这个colums

tableColumns() {
    let renderCols = Object.assign([], this.columns)//复制一份columns
    //设置render
    let expandRender = {
          type: "expand",
          width: 50,//展开列的宽度（就是那个箭头符号）
          render: (h, params) => {
            //复制属性 如果vue中没有props，可以直接设置不用assign，这一步也不需要，直接在return中props里面写就行了
            let props = Object.assign({}, this.$props, {
                searchable: false,
                showHeader: false,
                highlightRow: true,
                type: 'child'
            })
            //如果row中有children属性，就设置data为该children
            if ('children' in params.row) {
                  props.data = params.row.children
            }
            return h('Table', {
                  props: {...props},
                  on:{
                  //这里设置重写的on方法
                    }
              })
          }
    }
    renderCols = [expandRender, ...renderCols]
    return renderCols
}

现在我们table中的columns已经不能用this.columns了所以最后我们的table变成了

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

一个简单的树形表格就这样实现了