之前全是用的富文本編輯器。引用代碼塊看著不習(xí)慣，現(xiàn)在終于改成了markown了，可喜可賀，可喜可賀
最近老是在寫前端，用的是vue，iview框架，發(fā)現(xiàn)很多的功能都沒有現(xiàn)成的，只有自己來寫一些實現(xiàn)，比如tree-table , select-table 這種組合組件，才發(fā)現(xiàn)，render真的是很強(qiáng)大，但是真的又很不好用。
現(xiàn)在是有需求，數(shù)據(jù)格式是樹形，但是要求表格展示，于是我把實現(xiàn)方法在這里寫一下：
首先，我們需要一個普通的table

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

普通的table，[https://www.iviewui.com/components/table] 各項屬性都在上面，可以方便查看，那怎么實現(xiàn)tree的格式呢？
我們知道，tree格式一般都有一個children屬性，里面裝的是子節(jié)點(diǎn)，那么我們的樹形表格的重點(diǎn)就是要在表格中把children中的節(jié)點(diǎn)也用table格式展示出來，最重要的當(dāng)然就是columns屬性了，我們table要展示，需要columns屬性，我們先隨便設(shè)置一個：

            colums:[ 
                  {
                        title: '序號',
                        key: 'id'
                    },{
                        title: '名稱',
                        key: 'name'
                    }, {
                        title: '詳情',
                        key: 'note'
                    }]

這個對我們樹形表格無關(guān)緊要，現(xiàn)在我們需要使用render來修改一下這個colums

tableColumns() {
    let renderCols = Object.assign([], this.columns)//復(fù)制一份columns
    //設(shè)置render
    let expandRender = {
          type: "expand",
          width: 50,//展開列的寬度（就是那個箭頭符號）
          render: (h, params) => {
            //復(fù)制屬性 如果vue中沒有props，可以直接設(shè)置不用assign，這一步也不需要，直接在return中props里面寫就行了
            let props = Object.assign({}, this.$props, {
                searchable: false,
                showHeader: false,
                highlightRow: true,
                type: 'child'
            })
            //如果row中有children屬性，就設(shè)置data為該children
            if ('children' in params.row) {
                  props.data = params.row.children
            }
            return h('Table', {
                  props: {...props},
                  on:{
                  //這里設(shè)置重寫的on方法
                    }
              })
          }
    }
    renderCols = [expandRender, ...renderCols]
    return renderCols
}

現(xiàn)在我們table中的columns已經(jīng)不能用this.columns了所以最后我們的table變成了

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

一個簡單的樹形表格就這樣實現(xiàn)了