vue的render方法

版权声明：杨杨杨~~的版权 https://blog.csdn.net/weixin_38316697/article/details/84259492

vue的render方法

举3个例子来说明vue中的render方法

这里截取片段代码来举3个例子

例子1、

data : {
		content : '',
		pageNo : '', //当前页码
		pageSize : 10, //每条页数
                tableSize:'', //总数
		props:{
		  row:Object
		},
		jobName : "",
		JobData : [],
		tableTitle:[ {
            type:'expand',
            width:50,
            render:function(h,params){
                var sj = '来源表sql:'+params.row.SOURCETABLESQL;
                var sj1 = '目标表sql:'+params.row.OBJECTTABLESQL;
	          return h('div',[
	              h('div',{style:{float:'left',width:'1500px',background:'#ccc'}},[h('p',sj)]),
                  h('div',{style:{float:'left',width:'1500px',background:'#fc1'}},[h('p',sj1)])
			  ])
            }
        }]

效果:

例子2、

data : {
		content : '',
		pageNo : '', //当前页码
		pageSize : 10, //每条页数
                tableSize:'', //总数
		props:{
		  row:Object
		},
		jobName : "",
		JobData : [],
		tableTitle:[ {
            type:'expand',
            width:50,
            render:function(h,params){
               var functionList = [];
		var p =h('a', {
                    on : {
                        click : function() {
                            vm.view(params.row);
                        }
                    }
                }, params.row.JOBNAME);
                functionList.push(p);
                return h('div', functionList);
            }
        }]

效果:

例子3、

data : {
		content : '',
		pageNo : '', //当前页码
		pageSize : 10, //每条页数
                tableSize:'', //总数
		props:{
		  row:Object
		},
		jobName : "",
		JobData : [],
		tableTitle:[ {
            type:'expand',
            width:50,
            render:function(h,params){
               var o = '';
                $.ajax({
                    url:"../job/selectzJ",
                    type:"post",
                    async:false,
                    data:{'zdFlag':params.row.DBID},
                    success: function(result) {
                        if (result.msg == -9){
                            o = params.row.DBID;
			}else{
                            o = result.msg;
                        }
                    }
                })
                return  h('div', o);
            }
        }]

效果:

从以上3个例子中可以看出

 render:function(h,params){}方法中

h是一个函数，用处在于回调一个数值来显示，而params代表着这行数据中的参数的值