vue中render函数的使用

①：render函数内部的属性与事件 

             h("Button",{    // 这里可以是button 也可以是input等其他标签
                props: {     // 绑定属性
                  size: 'small',
                  type:"warning",
                  disabled:params.row.billStatus == "3" ? true:false,
                  level: {
                    type: Number,    // 数字类型 适用于输入框
                    required: true   // 必填项
                  }
                },
                style: {    //绑定样式
                  marginRight: '15px',
                  display:this.a   //a为true  表示隐藏整个按钮  
                },
                domProps:{   // DOM 属性
                 ref: 'baz'
                },
                attrs:{   // html特性
                  id:"box"
                },
                on:{    // 绑定事件
                  click:()=>{
                    this.cancellation(params.row.billNo)
                  },
                  "on-change":(value)=>{    // change事件
                   console.log("输出数据：",value.target.value)
                  }
                }
              },"作废"),   // 显示的文字

②：用render函数渲染iview中的树结构Tree

一：首先直接引用组件里的Tree标签，它会在页面展示一个树结构，由于它data里没有数据会显示暂无数据。

示例：

<Tree :data="information" :render="renderContent" show-checkbox @on-check-change="clickCheckBox"></Tree>

二：要想页面以树结构的形式出来，里面的data数据必须是一个数组且里面要套很多个对象，对象里面是后台返回的字段，注意在字段里面一定要有一个children，它表示的是树结构展开的子结构，这个children是一个数组，数组里面包含的对象就是要渲染的子结构。可以一直这样套下去，套多少层就表示有多少层树结构。

示例：

展开之后是这样的。

三：在得到想要的数据之后就可以以树结构的形式显示出来了。但是要想在树结构里面添加input输入框就要用到render函数 。

<Tree :data="data5" :render="renderContent" ></Tree>  绑定一个函数。

四：函数里的数据。

 renderContent(h,{root,node,data}){
              if(data.last_status == "1"){   // 判断条件是否是最后一级
                return h("div",[
                  h("span",data.servitemName),  // data是所有的数据，data.servitemName
                  h("span",{                    // 是树结构显示的数据
                    style:{
                      width:"100px",
                      height:'100%'
                    }
                  },
                  [
                    h("Input",{
                      style:{
                        width:'100px',
                        marginLeft:"20px",
                      },
                      attrs:{
                        placeholder:"请输入单价",
                        type:"number",        // input类型是number
                        size:"small"
                      },
                      on:{
                        "on-change":(value)=>{    // 输入框输入的值赋值给data里某一个字段。
                          data.price = value.target.value   
                        }
                      }
                    }),
                    h("Input",{
                      style:{
                        width:'100px',
                        marginLeft:"20px"
                      },
                      attrs:{
                        placeholder:"请输入单位"
                      },
                      on:{
                        "on-change":(value)=>{
                           data.unit = value.target.value
                        }
                      }
                    }),
                    h("Input",{
                      style:{
                        width:'100px',
                        marginLeft:"20px"
                      },
                      attrs:{
                        placeholder:"备注"
                      },
                      on:{
                        "on-change":(value)=>{
                          data.remark = value.target.value
                          data.lastStatus = "1"    // 在data里新添加一个字段并赋值。
                        }
                      }
                    })
                  ])
                ])
              }else{
                return h("span",data.servitemName)
              }
            },

五：最后的效果