vue的render方法

JS 专栏收录该内容
12 篇文章 0 订阅

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代表着这行数据中的参数的值

 

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值