博客

简介**

在vue开发前端页面的过程中，对于一些较复杂的嵌套样式，用template不太方便的，一般要用到render函数来进行渲染。

**

render本身是一个函数，它的参数也是一个函数。

render(): (h) => {
	return h('div', '数据对象或者标签属性', '标签内容或子节点')
}
/*
* 参数说明
* h：即render的参数，是一个函数，有三个参数
* 参数1：是一个html标签或者组件对象，例如这里是 'div'
* 参数2：是一个数据对象或者html的属性。这里可以是div的属性或者一个数组等，详细看示例
* 参数3：html标签的内容或者子节点。这里可以对应div的text或者下级元素节点
*/

示例1：

vue前端表格中渲染待展示对象。


使用场景：后端返回的数据中，需要展示在iview/element表格中某列的字段是在对象中的一个属性。

例如展示用户数据，需要展示用户写的书籍名，可能是关联数据。需要展示对象内部的数

title: [
	{
	title: '姓名',
	key: 'name'
},
	{
	title: '书籍名',
	render: (h, params) => {
			return h('div', {}, params.row.book.name)
		}
	}
],
// 表格数据
data: [
	{
	name: '张三',
	book: {name: '人类简史'}
	}
]
// 这里是按照iview或者element的table组件展现数据，姓名是一个简单的数据可以直接展示，书籍名就需要深入对象内部获取，用到render。

示例2

render渲染表格中的操作栏

render: (h, params) => {
        return h('div', [
		h('Button', {
			props: {type: 'text', size: 'small',
					loading: params.row.lineLoading
			},
			style: {display: params.row.status ? 'none' : 'inline-block'},
			attr: {disabled: params.row.status},
			class: 'button-class',
			on: {
				click: () => {                            				   this.update(params.row)
                 }
				}
			}, '修改'),
		h('Button', {}, '删除')
		])}
/*
这里模拟实现了操作栏按钮的loading状态，显示隐藏，禁用等几种设置
*/

渲染操作栏时，

利用props中的loading属性可以实现单行按钮的loading状态；

利用style中的display属性可以实现按钮的显示和隐藏

利用attr中的disabled属性可以实现按钮的禁用状态