如何在avue表格中放入缩略图，点击可查看大图

如何使用avue 表格制作缩略图

需求：

首先在column中写入相应的label字段：

{
label:"缩略图",
prop:" img ",
type:" upload ",
clearable:true,    //图片是否可被删除、替换
loadText:" 图片上传中，请稍等 ",
limit:9,
listType:" picture-card ",
span:24,
propsHttp:{
    res:"data"
},
tip:"上传缩略图，且不超过10M",
action:    // 图片上传的地址
}

js：
如果用户有上传图片，则将图片转换为json对象格式

  loadData(){
     this.crud.attrs [ "table-loading" ] = true
     this.$api
     .post()
     .then( (res = {}) => {
     this.crud.attrs.data = res.rows ? res.rows.map (row => ({
           ...row,
           img:row.img ? JSON.parse(row.img) : [ ]
           })) : [ ]
           })
    .finally(function() {
    this.crud.attrs [ ' table-loading ' ] = false
    })
  }

HTML：
页面可放置插槽：

        <template slot="img" slot-scope="scope">
          <img v-for="img in scope.rows.img" 
          :src="img.value" 
          :key="img.value" 
          alt="缩略图" />
        </template>