vue：render函数的实际应用

vue：render函数的实际应用

1.模板

render: (h, params) => {  
        return h("span",{},[])  //第一个参数是要渲染的元素；第二个可以写元素的样式，绑定事件，属性；第三个是元素的内容（可以对元素的数据进行处理）
 }

2.嵌套渲染

 render: (h, item) => {
                        return h("div", [  //没有给div绑定样式属性和方法，div显示的内容有三个div
                            h("div", { // 没有对div显示的内容进行处理
                                class: "",
                                style: {
                                },
                                attrs: {
                                    title: "详情"
                                },
                                on: {
                                    click: () => {
                                        console.log("item",item);
                                        self.editClickHandler(item.row);
                                    }
                                }
                            }),
                            h("div", {  // 没有对div显示的内容进行处理
                                class: "",
                                style: {
                                },
                                attrs: {
                                    title: "编辑"
                                },
                                on: {
                                    click: () => {
                                    }
                                }
                            }),
                            h("div", { // 没有对div显示的内容进行处理
                                class: "",
                                style: {
                                },
                                attrs: {
                                    title: "删除"
                                },
                                on: {
                                    click: () => {
                                    }
                                }
                            })
                        ]);
                    }

3.对元素内容进行处理

render: (h, params) => {  
        return h("span",{},[ //第一个参数是要渲染的元素；第二个可以写元素的样式，绑定事件，属性；第三个是元素的内容（可以对元素的数据进行处理）
              this.tansformTimeForm(params.row.number)  // 绑定一个方法对数据进行处理，不能在结尾写分号，会报错
                        ])
                    }
tansformTimeForm(num){    // 方法写在methods里面
      renturn num + 1；
  }