zoukankan      html  css  js  c++  java
  • iview table的render()函数的用法

    语法:render:(h,params)=>{}

    render:(h,params) => {
      return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])
    }

    当定义的元素没有其他元素时:

    render:(h,params)=>{
        return h('div', {style:{'100px',height:'100px',background:'#ccc'}}, '地方')
    }

    当定义的元素中要嵌套其他元素时:

    render:(h,params)=>{
         return h('div',{style:{'100px',height:'100px',background:'#ccc'}},[h('p','内容2')],'内容1')
    }

    我们可以嵌套3层元素来完成,来看看第一二层元素的嵌套:

    render:(h, params) => {
      return h('div',[
                      h('div',{style:{float:'left','50px',height:'50px',background:'#ccc'}},[h('p','内容2')]),
                      h('div',{style:{float:'left','50px',height:'50px',background:'#fc1'}},[h('p','内容2')])
                    ])
    }

    元素如何绑定事件:

    on: {
        click: () => {console.log('ffff')},
        mouseover:() => { console.log('bbb')}
     }

    如何根据后台的数据判断是否显示某些元素:

    {
                title: '操作',
                align:'center',
                130,
                render:(h, params) => {
                  let status = params.row.Status; //0:空闲  1:游戏  2:未上线
                  if (status===0){ return h('Button','空闲中') };
                  if (status===1){ return h('Button','游戏中')};
                  if (status===2){ return ""} //未上线时不显示}
    }

    原文:https://www.jianshu.com/p/f44a32f83cc8

  • 相关阅读:
    XJOI网上同步训练DAY2 T2
    XJOI网上同步训练DAY2 T1
    BZOJ 2661 连连看
    HDU 4411 Arrest
    BZOJ 2324 营救皮卡丘
    BZOJ 1927 星际竞速
    BZOJ 3550 Vacation
    XJOI网上同步训练DAY1 T3
    php 类的相互访问
    ThinkPhp5.0_文件上传
  • 原文地址:https://www.cnblogs.com/ssjf/p/11124257.html
Copyright © 2011-2022 走看看