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

一、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:()=>{}
      }
    },'標籤內容')
  ])
}

二、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>

三、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>

效果是這樣的：