antd的列表中显示图片

 在列表中显示图片

引入全局的文件下载地址

  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);
            }
          }
        });
      }
}

　　

 使用日期组件

ant design vue日期组件怎么清空（a-range-picker，a-date-picker）

https://blog.csdn.net/weixin_45629194/article/details/101279590