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;
}