iview table render多图片并点击放大

在columns中直接添加

{
          minWidth: 100,
          title: "图片/images",
          key: "image",
          render: (h, params) => {
            let pics = params.row.picture;//我这里是字符串，如果是数组，没必要写这个
            if (pics != null) {
              if (pics.length > 5) {
                let imgs = pics.replace(/"/g, "");
                var images = imgs.split(",");
                
                for (let i = 0; i < images.length; i++) {
                  images[i] = this.$uploadPicUrl + images[i];
                }
                //以上都是在拼数组
                return h(
                  "div",
                  images.map(item => {
                    return h("img", {
                      attrs: {
                        src: item,
                        style: "width:40px;height:40px;margin-right:5px"
                      },
                      on: {
                        click: () => {
                          this.showBigPic(item);//此处再用一个方法，建一个modal把图放大。
                        }
                      }
                    });
                  })
                );
              }
            }
            else
            {
              return h(
                'span',''
              )
            }
          }
        }

 <!-- 在放大图片的时候，放在这个框里面 -->
    <Modal
      v-model="bigPicVisible"
      title
      @on-cancel="cancel"
      :width="screenWidth*0.4"
      :height="screenHeight*0.4"
    >
      <img :src="bigPicUrl" style=" width:100%;height:100%" />
    </Modal>

 showBigPic(item) {
      console.log(item);
      this.bigPicVisible = true;
      this.bigPicUrl = item;
    }

一定注意，在没有图片的时候，要返回空的组件else
{
return h(
‘span’,’’
)
}
如果有分页，换页面了，render不刷新。