antd的列表中显示图片

在列表中显示图片

引入全局的文件下载地址

1	`import` `{ getFileAccessHttpUrl } from` `'@/api/manage'`

　定义返回图片完整地址的方法

methods: {
  getAvatarView: function(avatar) {
    return getFileAccessHttpUrl(avatar)
  }
}

定义返回插槽

columns: [
 {
            title: '图片',
            align: 'center',
            dataIndex: 'goodsImg',
            scopedSlots: { customRender: 'avatarslot' }
          }
]

定义一个插槽

<template slot="avatarslot" slot-scope="text, record, index"
          v-if="record.goodsImg != null" && record.goodsImg !="''">
  <div class="anty-img-wrap" style="width:100px;height:102px;">
    <a-avatar shape="square" :src="getAvatarView(record.goodsImg)"
              style="width:100px;height:102px; margin: 0 0 8px 50px;">
    </a-avatar>
  </div>
</template>

效果

搜索条件中增加列表选项

在data中定义属性

data() {
      return {
        tenantList: []
    }
}

定义初始化数据的方法

methods: {
 
queryByUserTenantId() {
    queryByUserTenantId().then((res) => {
      if (res.success) {  //成功
        this.tenantList = res.result.tenantList
      } else {   //失败
        console.log(res.message)
      }
    })
  }
 
 
}

页面加载初始化数组

created() {
     this.queryByUserTenantId()
   }

改造input框

<a-col :xl="6" :lg="7" :md="8" :sm="24">
  <a-form-item label="所属租户">
    <a-select
      style="width: 100%"
      v-model="queryParam.tenantId"
      placeholder="请选择所属租户">
          
      <a-select-option v-for="(tenant,index) in tenantList" :key="index" :value="tenant.id">
        {{tenant.tenantName}}
      </a-select-option>
    </a-select>
 
  </a-form-item>
</a-col>

效果

modal中加载树形结构的,商品分类

定义获取数据的形式

methods: {
      loadTree(){
        let that = this;
        queryGoodsCategoryTree().then((res)=>{
          if(res.success){
            that.treeData = [];
            let treeList = res.result.treeList;
            for(let a=0;a<treeList.length;a++){
              let temp = treeList[a];
              temp.isLeaf = temp.leaf;
              that.treeData.push(temp);
            }
          }
        });
      }
}