iview table中利用render动态循环输出以及嵌套

效果如图所示

效果图

dom结构如图所示

DOM结构

代码如下：

{
  title: '展示图片',
  align:'center',
  render: (h, params) => {
    //先运算得出要渲染的DOM结构
    let content=[];
    for(let i in params.row.img){
      if(parseInt(i)===5){   //当图片大于5张时切出循环
        break;
      }
      content.push(     //将图片以及多选框放进content
        h('div',  {
          style:{
            position:'relative',
            width:'60px',
            height:'60px',
            display:'inline-block',
            marginRight:'10px'
          }
        },[
          h('img', {
            attrs:{
              src:params.row.img[i]
            },
            style: {
              width:'60px',
              height:'60px',
            },
          }, ),
          h('checkbox', {
            props: {
              value:params.row.status,
            },
            style: {
              /*                        width:'60px',
                                      height:'60px',*/
              position:'absolute',
              left:0,
              top:'-3px',
              zIndex:'20'
            },
          }, ),
        ]),
      )
    }
    content.push(    //将'.......共10张'的span放进content
      h('span', {
        style: {
          fontSize:'14px',
          color:'#333333',
          position:'absolute',
          right:'118px'
        },
      }, '......共10张'),
    );
    content.push(    //将'查看更多'的span放进content中
      h('span', {
        style: {
          /*                    width:'60px',
                              height:'60px'*/
          color:'#58749C',
          fontSize:'14px',
          position:'absolute',
          right:'28px'
        },
      }, '查看更多>>'),
    );
    return h('div',{style:{
      textAlign:'left',
        display:'flex',
        alignItems:'center',
        position:'relative'
      }},content);      //将content放进最外层的div中进行渲染
  }
}

大致结构可以分为

render: (h, params) => {
//js的for循环进行运算，然后拼接别的内容，达成最终要渲染的dom结构的数组，可以再iview的官网，不难看出，一个数组的元素就是一个dom元素
dom数组分为return h('html标签名',{
  attrs 原生属性
  style 样式
  props 插件的自定义属性
  on 事件
},'html标签的内容')
}

然后先通过运算得到所要渲染的DOM的数组，而上面的代码，不难看出我所得到的要渲染的数组就是content，嵌套也是写在html标签的内容中，用一个[ ]数组包起来