render函數---使用在iview的Table以及Tree中

1、render基礎

render: function(createElement){//參數createElement又帶有自己的參數，用來告訴Vue頁面上需要渲染什么樣的節點
  return createElement('div',//第一項參數是模板的標簽渲染，即渲染成哪一種標簽
  {//第二項參數是給渲染的標簽的配置，如屬性、樣式、事件
    props:{},//標簽屬性
    style:{},//標簽樣式
    on: {//標簽事件
      click: () => {}
    }
  },'標簽內容')//第三項參數是渲染的標簽中的文本內容;
}

以上是我項目中實際的使用過的參數，想更具體的可以看vue官方文檔（https://cn.vuejs.org/v2/guide/render-function.html，現只領悟到這些）；還可以插入多個標簽，先最外面套有一個父標簽，在父標簽里在插入多個標簽；

render: function(createElement){
  return createElement(
    'h2',[//h2第一層標簽
      createElement('a',{//a是第二層標簽
        attrs: {//這是a的屬性
          name: 'headingId',
          href: '#'
        }
      },'標簽內容')
  ])
}

若要嵌套多個標簽寫createElement很繁瑣，其等價寫法：

render: (h,params) => {//h相當於createElement
  h('h2',[
    h('a',{
      props:{
         name: 'headingId',
         href: '#'
      },
      style:{},
      on:{
         click:()=>{}
      }
    },'標簽內容')
  ])
}

2、iview的Table表格

在columns里面配置，render:(h,params){}，params包含了rows、columns、index信息；綁定事件必須使用箭頭函數。現在iview的Table支持slot插入標簽了，即在columns里配置時為

columns:[
  {
     title: '',
     slot: 'handle'
  }
]
//渲染的時候
<Table :columns="columns" :data="datas">
    <template slot="handle' slot-scope="{row,index,column}">
      <button>按鈕</button>
   </template>
</Table>

3、Tree樹形結構

是在datas里配置，我是需要不使用它自帶的選擇框，而是在文本后面顯示一個單選框來進行選擇，所以就用了render函數來插入單選。

<template>
  <Modal title="分類設置">
    <Tree :data="datas"></Tree>
  </Modal>
</template>

<script>
export default {
    name: 'ClassifyPop',
    data(){
        return {
            datas:[
                {
                    title: '干雜',
                    children: [
                        {
                            title: '辣椒',
                            render: (h,params) => {
                                return h('span',[
                                    h('span',{
                                        style:{
                                            marginRight: '10px'
                                        }
                                    },params.data.title),
                                    h('Checkbox',{
                                        props:{
                                            name: 'classify'
                                        }
                                    })
                                ])
                            }
                        }
                    ]
                },
                {
                    title: '調味品',
                    children: [
                        {
                            title: '鹽',
                            render: (h,params) => {
                                return h('span',[
                                    h('span',{
                                        style:{
                                            marginRight: '10px'
                                        }
                                    },params.data.title),
                                    h('Checkbox',{
                                        props:{
                                            name: 'classify'
                                        }
                                    })
                                ])
                            }
                        }
                    ]
                }
            ]
        }
    },
}
</script>

效果是這樣的：