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>
效果是这样的: